In my react app, there is a useEffect. This is my code:
useEffect(() => {
const trimmedArray = trimArray(props.firstInputValue);
props.setFirstFinalSetArray(trimmedArray);
setFirstPrintArray(`{${trimmedArray.join(', ')}}`);
}, [props.firstInputValue]);
trimArray is a functionsetFirstFinalSetArray is a useState set function.setFirstPrintArray is state in current component.firstInputValue is state in parent component.And I found due to this line : props.setFirstFinalSetArray(trimmedArray);
I am getting this error: 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
You can destructure your props like:
const MyComponent = ({firstInputValue, setFirstFinalSetArray}) => {
const [firstPrintArray, setFirstPrintArray] = useState()
useEffect(() => {
const trimmedArray = trimArray(firstInputValue);
setFirstFinalSetArray(trimmedArray);
setFirstPrintArray(`{${trimmedArray.join(', ')}}`);
}, [firstInputValue, setFirstFinalSetArray]);
// rest of your code
}
When I was learning React I was hesitant to do this for whatever reason (I liked having props I guess), but it really does make for clean code.