React-hooks does not update state

Question

Some how match data is from the parent class, and I initialized matches using useState(match) However, matches data is containing old data and wasn't updated as parent match data. Anyone help?

const FixtureDetailItem = ({ type, match, teams, isAdmin, postMatchesStart, putMatchesStart }) => {
  console.log(match)
  const [matches, setMatches] = useState(match);
  const { homeTeamId, homeTeamName, homeScore, awayTeamId, awayTeamName, awayScore, scheduledAt, location, league, matchRecords} = matches;

  useEffect(() => {
    console.log('fired')
    console.log(matches)
    setMatches(matches)
  }, [matches]);

You're doing something wrongly. When matches is changed the effect going to re-fire because matches is its dependency. — TheMisir
– TheMisir, Commented Feb 8, 2020 at 23:35
Also instead of setMatches(matches) use setMatches({ ...matches }). — TheMisir
– TheMisir, Commented Feb 8, 2020 at 23:35

Richard Matsen · Accepted Answer · 2020-02-09 03:07:06Z

1

There seems to be a circular connection between useEffect() and the useState - useEffect has a dependency of matches, then sets matches.

If you want it to change when match changes, then match should be the dependency.

Note that useState(match) only fires on the very first render. On subsequent renders, you must use setMatches() to change the value of matches.

const FixtureDetailItem = ({ type, match, ... }) => {

  const [matches, setMatches] = useState(match);
  const { ... } = matches;

  useEffect(() => {
    setMatches(match)
  }, [match]);

  ... // JSX here

}

@James I though this might need some clarification.

See my statement above - useState(match) only fires on the very first render.

On first render useState(match) sets matches equal to match.

Then the parent changes match, and because the match prop changed, the FixtureDetailItem function runs again, but React does not run useState(match) for the new value (by design).

It considers matches to be internal state of this component and leaves it with the old value.

Since matches does not change, the effect will not run - it only runs when one of it's dependencies change.

edited Feb 9, 2020 at 3:07

answered Feb 8, 2020 at 23:27

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jake Kwon Over a year ago

How can it be possible to implement internal state to use new value? once match is changed?

Richard Matsen Over a year ago

With setMatches() - that's what the useEffect() is doing.

Jake Kwon Over a year ago

by understanding what you've mentioned "It considers matches to be internal state of this component and leaves it with the old value" above code seems leave internal matches state with the old value, so child component isn't updated. Doesn't it?

Richard Matsen Over a year ago

No setMatches() can change it, but of course needs to be explicitly called.

Collectives™ on Stack Overflow

React-hooks does not update state

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related