useLayoutEffect function

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

Runs sideEffect synchronously after a DartFunctionComponent 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 a DartFunctionComponent.

Example:

UseLayoutEffectTestComponent(Map props) {
  final width = useState(0);
  final height = useState(0);

  Ref textareaRef = useRef();

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

  return react.Fragment({}, [
    react.div({}, ['textarea width: ${width.value}']),
    react.div({}, ['textarea height: ${height.value}']),
    react.textarea({'onClick': (_) => width.set(0), 'ref': textareaRef,}),
  ]);
}

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

Implementation

void useLayoutEffect(dynamic Function() sideEffect, [List<Object?>? dependencies]) {
  final wrappedSideEffect = allowInterop(() {
    final result = sideEffect();
    if (result is Function) {
      return allowInterop(result);
    }

    /// When no cleanup function is returned, [sideEffect] returns undefined.
    return jsUndefined;
  });

  return React.useLayoutEffect(wrappedSideEffect, dependencies);
}