useLayoutEffect function

void useLayoutEffect(
  1. dynamic sideEffect(), [
  2. List<Object?>? dependencies
])

Runs sideEffect synchronously after a dart function component renders, but before the screen is updated.

Compare to useEffect which runs sideEffect after the screen updates. Prefer the standard useEffect when possible to avoid blocking visual updates.

Note: there are two rules for using Hooks:

  • Only call Hooks at the top level.
  • Only call Hooks from inside the first argument of uiFunction.

Example:

UiFactory<UseLayoutEffectExampleProps> UseLayoutEffectExample = uiFunction(
  (props) {
    final width = useState(0);
    final height = useState(0);

    Ref textareaRef = useRef();

    useLayoutEffect(() {
      width.set(textareaRef.current.clientWidth);
      height.set(textareaRef.current.clientHeight);
    });

    return Fragment()(
      Dom.div()('textarea width: ${width.value}'),
      Dom.div()('textarea height: ${height.value}'),
      (Dom.textarea()
        ..ref = textareaRef
        ..onClick = (_) => width.set(0)
      )(),
    );
  },
  _$UseLayoutEffectExampleConfig, // ignore: undefined_identifier
);

Learn more: reactjs.org/docs/hooks-reference.html#uselayouteffect.

Implementation

void useLayoutEffect(dynamic Function() sideEffect, [List<Object?>? dependencies]) => react_hooks.useLayoutEffect(sideEffect, dependencies);