Home > Article > Web Front-end > Use cases for `useInsertionEffect` React hook
Everybody familiar with useEffect hook, sometimes useLayoutEffect is more appropriate.
Not so many people ever used useInsertionEffect, let's explore it.
API for hook is very similar to useEffect, need to add code into setup function, dependencies array and it can return a cleanup function.
React docs give this description.
useInsertionEffect is for CSS-in-JS library authors.
It can be useful for other purposes, mainly to run some code once on component mount, e.g. add event listener to a window.
React.useInsertionEffect(() => { initShiki().then((highlight) => { setHtml(highlight(content)); }); }, [content]);
useInsertionEffect(() => { const popCb = () => { const newVal = parse(filterUnknownParamsClient(defaultState)); state.current = newVal }; window.addEventListener(popstateEv, popCb); return () => { window.removeEventListener(popstateEv, popCb); }; }, []);
useInsertionEffect(() => { const cb = () => { _setState(stateMap.get(stateShape.current) || stateShape.current); }; const unsub = subscribers.add(stateShape.current, cb); return () => { unsub(); }; }, []);
The above is the detailed content of Use cases for `useInsertionEffect` React hook. For more information, please follow other related articles on the PHP Chinese website!