useLayoutEffect function
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);