React Hook useEffect has a missing dependency when passing props using React Hook

Question

So i try to use Effect to passing the component from redux, here is my code:

const initState = {
    newAttribs: { ...props.state.Auth },
  };

  const [userList, setUserList] = useState(initState);

  useEffect(() => {
    setUserList({ ...userList, newAttribs: { ...props.state.Auth } });
  }, [props.state.Auth]);

  console.log("userList now", userList);

but it keeps geeting me warning like this in the console:

WARNING in [eslint]
src\pages\Login.jsx
  Line 15:6:  React Hook useEffect has a missing dependency: 'userList'. Either include it or remove the dependency array. You can also do a functional update 'setUserList(u => ...)' if you only need 'userList' in the 'setUserList' call  react-hooks/exhaustive-deps

Can someone explained to me where did i do wrong here....

Answer 1

Your effect hook depends on userList but it's not included in the dependency array. One useful alternative is to use the callback function form of the state setter:

setUserList(userList => (
  { ...userList, newAttribs: { ...props.state.Auth }) }
);