const [stuff, set_stuff] = useState{a: 1}
...
set_stuff({a: 1})
when set_stuff({a: 1}) is run, will it trigger downstream dependencies that listen to stuff?
If they listen to stuff, yes.
If they listen to a property of stuff that's equal to the previous value at that property (like a and 1), no. Example:
const App = () => {
const [stuff, setStuff] = React.useState({a: 1});
React.useEffect(() => {
console.log('Will trigger later because stuff changed');
}, [stuff]);
React.useEffect(() => {
console.log('Will not trigger later because stuff.a did not change');
}, [stuff.a]);
React.useEffect(() => {
setTimeout(() => {
setStuff({ a: 1 });
}, 1000);
}, []);
return 'foo';
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>React does not do the deep comparison
If you want to trigger on value change do like below
useEffect(() => {
console.log('Something');
}, [stuff.a]);
If you listen the object stuff, it will trigger downstream dependencies because the two identical object is not really identical in computer. When you set_stuff, you just changed the value of stuff by a new address pointer.
const stuffOne = {a: 1}
const stuffTwo = {a: 1}
console.log(stuffOne === stuffTwo) // false