I'm building a form where one of the step is a card selection. I have two useEffect functions.
The first one is an equivalent to ComponentDidMount, it allows me to select previously selected card (useful when navigating between form steps). The data is received as a props from the parent component.
useEffect(() => {
/* Allow to display previously selected image (when navigating between form steps)
Run each time the component is rendered */
setSelectedImage({ id: props.values.image_id });
}, []);
The second one allows me to update parent's states with the currently selected card infos when a card is selected.
useEffect(() => {
/* Allow to store currently selected image parameters in parent's state
Run each time selectedImage changes */
props.handleCardChange(selectedImage.params);
console.log(selectedImage.params);
}, [selectedImage]);
It's working but I have these warnings :
Line 118:5: React Hook useEffect has a missing dependency: 'props.values.image_id'. Either include it or remove the dependency array. If 'setSelectedImage' needs the current value of 'props.values.image_id', you can also switch to useReducer instead of useState and read 'props.values.image_id' in the reducer react-hooks/exhaustive-deps
Line 125:5: React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps
How can I improve this ?
What's the best practice when dealing with state initialization ?
