useEffect does not call when deps changes if using useSelector from react-redux

Viewed 64

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?

0 Answers
Related