Difference between using useRef with useCallback and useEffect when component mounts

Question

For example, let's say we have to trigger a function when component mounts. For me, I have two options to doing it.

first one is using useRef() hook.

import { useCallback } from "react";

export default function Test() {
  const ref = useCallback((node) => {
    if (node) {
      console.log("mounts");
    }
  }, []);

  return (
    <main>
      <div ref={ref}>TEST</div>
    </main>
  );
}

second one is using useEffect() hook.

import { useEffect } from "react";

export default function Test() {
  useEffect(() => {
    console.log("mounts");
  }, []);

  return (
    <main>
      <div>TEST</div>
    </main>
  );
}

expected behaviors are showing 'mounts' in console when component mounts and both of them work properly.

The first one might not work if <div> is somehow out of DOM but I'll suppose there are no conditional differences.

In this situation, Is there any possible disadvantages using either of them or differences?

From this question, I want to know about

difference between two methods of displaying 'mounts' in console.
possible disadvantage or advantage using either of them

score 0 · Answer 1 · answered Mar 28 '23 at 03:55

Using useCallback with useRef:

Using useCallback with useRef allows you to store a value in the useRef hook and use it in the callback function. This is useful when you need to refer to a value that doesn't change over time, such as a constant or a configuration.

Using useEffect:

Using useEffect allows you to perform an action when a component mounts, such as displaying a message in the console. This is useful for performing initialization work or setting up subscriptions. Unlike useCallback, useEffect does not require a useRef hook.

Possible Disadvantage:

Using useCallback with useRef may require more code than using useEffect, as it requires creating a useRef hook and setting a value inside it.

Possible Advantage:

Using useCallback with useRef allows you to access a value that doesn't change over time, which can be useful in some cases.

Difference between using useRef with useCallback and useEffect when component mounts

1 Answers1