Reactjs - State update not working after first update

MarcVilaTornamorell
November 22, 2024
122 views
0 votes
2 Answers

I’m trying to update a state calling its setState method from an useEffect, but it’s updating only on the render and the first call to the setState method.

const [filterChanged, setFilterChanged] = useState(false);

useEffect(() => {
    console.log('filterChanged UPDATED', filterChanged);
}, [filterChanged]);

useEffect(() => {
    const sessionFilter = sessionStorage.getItem('test-filter');
    if (sessionFilter === props.selectedFilter) {
        console.log('filter not changed');
        setFilterChanged(false);
    } else {
        console.log('filter changed');
        setFilterChanged(true);
    }

    sessionStorage.setItem('test-filter', props.selectedFilter);
}, [props.selectedFilter]);

I left the console.logs because I can see in the console the filter changed messages but not the updated ones.
I know this is asyncronous but the filterChanged dependant useEffect is not being triggered even a while after calling the setFilterChanged method.

Tags: reactjs

Answers

- IbrahemMohamed
- November 20, 2024 at 3:24 pm
- 0 votes
0
The first useEffect executes twice: initially during the first render, and again when setFilterChanged(true) is called.

However, if you select the same category, the second useEffect will not execute because the variables in its dependency array do not change. This means filterChanged will remain true.

Instead of writing setFilterChanged(true), you can write setFilterChanged(!filterChanged).

If the filter does not change, neither of the useEffect hooks will execute.

Login or Signup to reply.

Please do not allow the component to retain the value of the state filterChanged. You can reset the state with a key. The sample code below does the same. Please also see the Test run enclosed as well.

App.js

import { useState, useEffect } from 'react';

export default function App() {
  const [someState, setSomeState] = useState(null);
  return (
    <>
      <button
        onClick={() => {
          setSomeState(Math.random());
        }}
      >
        Set Some state, check the console
      </button>
      <br />
      <Component selectedFilter={someState} key={Math.random()} />
    </>
  );
}

function Component(props) {
  const [filterChanged, setFilterChanged] = useState(false);

  useEffect(() => {
    console.log('filterChanged UPDATED', filterChanged);
  }, [filterChanged]);

  useEffect(() => {
    const sessionFilter = sessionStorage.getItem('test-filter');
    if (sessionFilter === props.selectedFilter) {
      console.log('filter not changed');
      setFilterChanged(false);
    } else {
      console.log('filter changed');
      setFilterChanged(true);
    }

    sessionStorage.setItem('test-filter', props.selectedFilter);
  }, [props.selectedFilter]);
}

Reactjs – State update not working after first update

Answers