maybe im misunderstanding how this should work, bu...

# javascript

[Josh Feinberg]

maybe im misunderstanding how this should work, but if i create a new object, it should not try to restore the state, right?

[Josh Feinberg]

i have two pages in my app (using react-router), both just show a grid. when i load the first grid i get what i expect

Calling render
Size of rows in state - 8
Size of rows in props- 8

then i link to the other page and i get this

Calling render
Size of rows in state - 8
Size of rows in props- 3

i would assume that when props change that the state gets cleared, but it seems that is not the case

[araqnid]

no, state is specifically intended to be retained despite prop changes

[araqnid]

this sounds like a common issue I’ve seen when using router to give the props for the criteria of some data display: you need to either
1. manually detect that the props have changed, and update the data/reset the state
2. encode the criteria into a “key” so that React will itself tear down and recreate the component rather than simply updating its props

[Josh Feinberg]

ah, that key idea makes a lot of sense

[Josh Feinberg]

so there is no built in callback for when the props update then?

[Josh Feinberg]

never mind, i think i got it. thanks for the help!

[araqnid]

Callback for when the props update = useEffect

[araqnid]

useEffect/useState combinations are pretty common for this, e.g. triggering an AJAX call to fetch data