Here is my code example:
import { useDispatch, useSelector } from 'react-redux';
import { updateMyData } from '../features';
const MyComponent = ({ list }) => {
const dispatch = useDispatch();
// select myData from redux store
const someData = useSelector((state) => state.myData);
React.useEffect(() => {
// YOU WILL NOT SEE THIS LINE
console.log('useEffect', someData);
}, [someData]);
// each time I can see newly changed data
console.log('someData', someData);
const handleClick = () => {
const newData = list.find((l) => l.name === 'myName');
// change myData, in my case it is some pagination, and I select newData from existing list
dispatch(updateMyData(newData));
};
return <div onClick={handleClick}>{'Hello world!'}</div>;
};
In my case, I have a list of items, and when I press some button change it (in redux store). someData changes, MyComponent rerenders but useEffect wasn't called.
useEffect was called only during the first render.
Why useEffect hadn't called when its deps were changed?