React lifecycles - Custom Hooks

You can find all the code in this post on the repo Github.

---

Lifecycle-related React custom hooks challenges

---

useEffectOnce()

import { useEffect, useState } from "react";

function useEffectOnce(effect) {
  useEffect(() => {
    return effect();
  }, []);
}

/* Usage example */

export default function App() {
  const [value, setValue] = useState();

  useEffectOnce(() => {
    setValue("once!");
  });

  return (
    <div>
      <p>value: {value}</p>
    </div>
  );
}

---

useIsFirstRender()

import { useEffect, useState } from "react";

function useEffectOnce(effect) {
  useEffect(() => {
    return effect();
  }, []);
}

/* Usage example */

export default function App() {
  const [value, setValue] = useState();

  useEffectOnce(() => {
    setValue("once!");
  });

  return (
    <div>
      <p>value: {value}</p>
    </div>
  );
}

---

useIsMounted()

import { useEffect, useRef } from "react";

function useIsMounted() {
  const isMountedRef = useRef(true);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  return () => isMountedRef.current;
}

/* Usage example */

export default function App() {
  const isFirstMount = useIsMounted();

  return (
    <div>
      <p>Is first mount: {String(isFirstMount())}</p>
    </div>
  );
}

---

usePrevious()

import { useRef, useEffect } from "react";

function usePrevious(value) {
  const previousRef = useRef();

  useEffect(() => {
    previousRef.current = value;
  }, [value]);

  return previousRef.current;
}

/* Usage example */

export default function App() {
  const previousValue = usePrevious(1);

  return (
    <div>
      <p>Previous value: {previousValue}</p>
    </div>
  );
}

---

useUpdate()

import { useReducer } from "react";

const updateReducer = (num) => (num + 1) % 1_000_000;

function useUpdate() {
  const [_, update] = useReducer(updateReducer, 0);

  return update;
}

export default function App() {
  return <div></div>;
}

---

useUpdateEffect()

import { useRef, useEffect } from "react";

function useUpdateEffect(effect, deps) {
  const isFirstRenderRef = useRef(true);

  useEffect(() => {
    if (isFirstRenderRef.current) {
      isFirstRenderRef.current = false;
      return;
    }

    return effect();
  }, deps);
}

export default function App() {
  const fetchData = () => {};

  const effect = useUpdateEffect(fetchData);
  return (
    <div>
      <p></p>
    </div>
  );
}

---

Reference

• 3. useIsFirstRender() - BFE.dev
• 5. usePrevious() - BFE.dev
• 9. useEffectOnce() - BFE.dev
• 16. useUpdateEffect() - BFE.dev
• 14. implement useIsMounted() - BFE.dev