CODEWITHSUNDEEP
reactjs
Enzoenzo
Enzoenzo

Reputation: 67

Logical understanding react hooks, difference between useState and useEffect (or state and lifecycle methods)

I cannot understand the difference between useState and useEffect. Specifically, the difference between state and lifecycle methods. For instance, I have watched tutorials and seen this example for useEffect:

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  const add = () => {
    setVal((x) => { return x + 1 })
  }
   useEffect(() => {
    if (value > 0) {
      document.title = `Title: ${value}`
    }
   },[value])
  return <>
    <h1>{value}</h1>
    <button className="btn" onClick={add}>add</button>
  </>;
};

When we click the button, the title of the document shows us increasing numbers by one. When I removed the useEffect method and did this instead:

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  document.title = `Title: ${value}`
  const add = () => {
    setVal((x) => { return x + 1 })
  }
  return <>
    <h1>{value}</h1>
    <button className="btn" onClick={add}>add</button>
  </>;
};

It worked same as the previous code. So, how does useEffect actually work? What is the purpose of this method?

P.S. Do not send me links of documentation or basic tutorials, please. I have done my research. I know what I am missing is very simple, but I do not know what is it or where to focus to solve it.

Upvotes: 2

Views: 744

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370659

Using useEffect to track stateful variable changes is more efficient - it avoids unnecessary calls by only executing the code in the callback when the value changes, rather than on every render.

In the case of document.title, it doesn't really matter, since that's an inexpensive operation. But if it was runExpensiveFunction, then this approach:

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  runExpensiveOperation(value);

would be problematic, since the expensive operation would run every time the component re-renders. Putting the code inside a useEffect with a [value] dependency array ensures it only runs when needed - when the value changes.

This is especially important when API calls that result from state changes are involved, which is pretty common. You don't want to call the API every time the component re-renders - you only want to call it when you need to request new data, so putting the API call in a useEffect is a better approach than putting the API call in the main component function body.

Upvotes: 2

Related Questions