0

Besides the cleanup and the dependency array, is there any reason to use useEffect?

function App() {
  const [a, setA] = useState(0);

  const b = `Number: ${a}`;

  return (
    <div className="App">
        <p>
          {b}
        </p>
        <button onClick={() => setA(a + 1)}>click</button>
    </div>
  );
}

As we can see, we don't use the useEffect, but as changing state a will trigger re-rendering, then also b will be changed. It looks like we don't even need the useEffect in this case.

So is there any unique benefit from the useEffect except for the cleanup and the dependency array?

Edit

I think most of the answers are based on one assumption: The OP has a good understanding of the react life-cycle logic. But unfortunately, that's my weakness.

Although I used the useEffect and those old component* life-cycle methods a lot, I didn't really realize that those are something outside of the function component itself. Which gives them more flexibility and functionalities.

I am not trying to insult anyone, but I do think that we should answer the question more specifically and carefully. Anyone traverses my profile can see that I also answered a lot of questions. Based on my experience, people usually lack the knowledge to even ask a critical and clear question, they don't even realize what is the key point(Yes, I am one of them in this question).

When I am trying to answer the question, I will first try to clarify the question to understand what is the critical piece that the OP is missing.

@PatrickRoberts was exactly saying something which is correct, but that didn't really help me as that is not the piece I was missing. I would insult myself that I didn't make the question clear enough. But I also want to say that, understanding/clarifying the question is more important than giving the correct answer. After all, theoretically, most of the questions can be solved by official documents.

Sraw
  • 18,892
  • 11
  • 54
  • 87
  • How about something that involves a reference to a node that was rendered in the DOM, or making an asynchronous HTTP request? The use case you've shown is entirely synchronous and doesn't involve the DOM so `useEffect` is pointless. See [the docs](https://reactjs.org/docs/hooks-effect.html). – ggorlen Oct 18 '20 at 03:41
  • @ggorlen It doesn't really answer my question I think, I know the difference between that normal class style and the new hook style. But I somehow get your point, if I need something asynchronous, then I should use the `useEffect`, is that your key point? – Sraw Oct 18 '20 at 03:49
  • No, but that's a big part of it because anything asynchronous won't be able to run before the JSX returned by the functional component for rendering. The callback to `useEffect` isn't run at the same time as the function body, which puts it in the class of "lifecycle methods" that existed prior to hooks. – ggorlen Oct 18 '20 at 03:53
  • @ggorlen Yeah, I think your point is the most convinced one, could you supplement it into a concrete answer so that I can accept it? – Sraw Oct 18 '20 at 03:55
  • 2
    Thanks but it still seems like a duplicate to me. There are other resources for what hooks are and why we'd want to use them around SO and I think those answers are going to be more authoritative than my ramblings here. Existing answers also seem pretty good here. – ggorlen Oct 18 '20 at 03:56
  • The edit section and many of the comments from OP with the condescending tone along with a little hint of narcissistic vibe has put me off to be honest. I'll disagree with the whole aspect understanding of OP. If as a programmer, you are confused about what your problem is, most likely you won't get a concrete answer. It is your responsibility to give a clear question. More importantly, SO isn't the place for vague questions where people will have to make guess. Otherwise there wouldn't be a closing reason for _need more focus_ – itachi Oct 18 '20 at 05:04
  • @itachi Btw, the option "need more focus" is "asking for more clarity/focus", but not something like "let's ignore this vague question". The ultimate goal is still solving the question. – Sraw Oct 18 '20 at 05:12

1 Answers1

2

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

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

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

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously.

Nilesh Kant
  • 351
  • 2
  • 10