useLayoutEffect

External Documentation

void useLayoutEffect(

  1. Object? sideEffect(), [

  2. List<Object?>? dependencies
])

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

Example:

final MyComponent = registerFunctionComponent((props) {
  final width = useState(0);
  final textareaRef = useRef<Element>(null);

useLayoutEffect(() {
width.set(textareaRef.current?.clientWidth ?? 0);
});


return div(children: [
pEl('textarea width: ${width.value}'),
textarea({'ref': textareaRef.jsRef}),
]);
});

Implementation

void useLayoutEffect(
  Object? Function() sideEffect, [
  List<Object?>? dependencies,
]) {
  JSAny? wrappedSideEffect() {
    final result = sideEffect();
    return (result is void Function()) ? result.toJS : _jsUndefined;
  }

final jsDeps = dependencies?.map(_toJsAny).toList().toJS;
_reactUseLayoutEffect(wrappedSideEffect.toJS, jsDeps);
}