Skip to content

useBeforeMount ​

useBeforeMount is a React equivalent adaptation of Vue's onBeforeMount, implemented based on useLayoutEffect during the initial mounting phase.

Basic Usage ​

This hook is suitable for placing logic that "runs closely to the layout phase right before and after the first render", such as preparing DOM-related data in advance.

tsx
useBeforeMount(() => {
  console.log('before mount');

  return () => {
    console.log('cleanup on unmount');
  };
});

In this code snippet: the callback is executed during the initial mount, and the returned cleanup function is executed when the component is unmounted.

API ​

ts
function useBeforeMount(fn: EffectCallback): void;

Notes ​

  • Executes only once.
  • Executes earlier than the regular useEffect.
  • Can return a cleanup function.

Released under the MIT License