1

In most react examples I have seen, people seem to avoid placing code directly into a functional component's body but instead are wrapping it into useEffect(() => {...}). E.g. in the official docs:

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Why is this better than simply writing:

function Example() {
  const [count, setCount] = useState(0);
  document.title = `You clicked ${count} times`;

  return (...);
}

In both cases the document title will be set on each render. (I believe with useEffect() the code is executed after render, but that doesn't seem to be relevant in this example, right)

I understand the value of useEffect() if:

  • States are passed as a second parameter so the code won't be executed on every render but with respect to the specified state changes.
  • We take advantage of the cleanup mechanics.

But without that? Is there still a reason to wrap your code into useEffect()?

Giraphi
  • 1,383
  • 1
  • 11
  • 26
  • I'm not 100% sure but I think the plain const and the useEffect will run the same amount of times and in your examples there's no advantage to use it. But I could be wrong. – Joe Lloyd Jan 29 '20 at 10:21

3 Answers3

0

Answering my own question. The difference of wrapping code into useEffect without dependency array compared to having that code directly in the function body is that it will be executed after every component render, not before.

See current react docs (June 2023)

If you omit this argument, your Effect will re-run after every re-render of the component

I believe some (older) tutorials leave out the dependency array, while it would actually make more sense to include it.

However the current react docs (June 2023) are pretty clear about this topic and give a more in-depth explanation here.

Giraphi
  • 1,383
  • 1
  • 11
  • 26
-3
useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

The code should be like that because now useEffect will only call when count state will change

owais latif
  • 61
  • 1
  • 2
  • 14
-4

See the official doc here about useEffect hook. The useEffect is similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined. Does it give you any hint?

Amit Mendapara
  • 68
  • 1
  • 3
  • Thanks, I know that. But unfortunately this does not answer my question. – Giraphi Jan 29 '20 at 10:44
  • The function component is more like "render" method of class component. And render method should not have any side effects while running. The "document.title" (or any dom manipulation) is a side effect and should be avoided in render. – Amit Mendapara Jan 29 '20 at 11:21
  • But it's also more than just the "render" method of a class and deals with states etc. Also, my goal is not so much to think about how stateful functional components would translate into class components but understand how to write them best. – Giraphi Jan 29 '20 at 12:19