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....

Nick · Accepted Answer · 2022-11-23 02:19:32Z

2

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 }) } );

answered Nov 23, 2022 at 2:19

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JS24 Over a year ago

can you explained it more...

JS24 Over a year ago

it works but it seems it dont get it..

Nick Over a year ago

You use userList inside the effect so you should make sure to include it in the dependency array to make sure the effect runs with its current value. The function form of the setter gets rid of this dependency since the function is defined inside the effect body (and will always refer to the current version of state).

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related