0

For example, from the documentation (https://reactjs.org/docs/hooks-effect.html) -

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

However this would not work:

import React, { useEffect } from 'react';

function Example() {
  var count = 0;

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

What requires us to use the useState call? What are the advantages?

Mason Stevens
  • 11
  • 1
  • 2
    you are getting ahead of yourself. Read this documentation first: https://beta.reactjs.org/learn/state-a-components-memory#when-a-regular-variable-isnt-enough – Randy Casburn Mar 07 '23 at 15:44
  • 3
    This question has nothing to do with `useEffect`, it's all about how state/re-renders work in react. I just don't what you to be confused on where the problem is – Brian Thompson Mar 07 '23 at 15:45
  • Related: https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate – Randy Casburn Mar 07 '23 at 15:46
  • and don't forget to set the dependency array always when you use a useEffect – ferter3006 Mar 07 '23 at 18:43
  • React component instances are ephemeral. React can (and will!) re-render your components (i.e. call the function again) to account for upstream changes. That means that `count` will be re-initialized to 0 and will have the wrong value. Additionally, React will not know to re-render your component when the value changes unless you use [the methods React provides you to let you know something changed](https://stackoverflow.com/questions/60940633/why-is-react-not-rendering-my-component-state-correctly). – Jared Smith Mar 07 '23 at 19:17

3 Answers3

2

It's more related on how change detection works in React.

Rendering is triggered after changes in the local state using hooks likes useState/useReducer or in your component props.

If you don't use useState hook to change the state the rendering will not be triggered and you will not see the changes on your view

useEffect will execute after each render

  1. dom updated
  2. page painted
  3. useEffect cleanup
  4. useEffect execute and change the state
  5. another render is triggered with the new state
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
0

If you modify the state directly react doesn't notice the change and therefore useEffect is not called.

Changing the state in react directly is always a bad practice you should always use the set method of useState because otherwise react will not notice the change. Therefore things like rendering the value and useEffect won't work.

Basically if you directly update the state nothing will change.

Wijze
  • 94
  • 5
0

The simplest answer is that you need a hook.

In React, hooks are functions that give you access to different React features while a React component is rendering.

Evan
  • 35
  • 4