I'm trying to update state in a higher-order component from a child. My solution is to set state to true after setting tags. useEffect runs when state is true, firstly updating state in the parent component and then updating state to false, which halts its invocation. My aforementioned solution is the only way I've managed to prevent useEffect's infinite loop.
const Student = ({
appendTags,
student: {
id: studentId,
firstName,
lastName,
pic,
email,
company,
skill,
grades,
tags: studentTags
}}) => {
const fullName = `${firstName} ${lastName}`;
const [tag, setTag] = useState('');
const [tags, setTags] = useState([]);
const [stateUpdated, setStateUpdated] = useState(false);
const [displayGrades, setDisplayGrades] = useState(false);
const onTagsSubmit = e => {
if (tag.length) {
e.preventDefault();
setTags(prevState => [...prevState, tag]);
setStateUpdated(true);
setTag('');
}
}
useEffect(() => {
if (stateUpdated) {
appendTags(studentId, tags);
setStateUpdated(false);
};
}, [stateUpdated, setStateUpdated, tags, appendTags, studentId]);
Looks like this is what we have, if you remove stateUpdated.
I presume than on appendTags() call the parent component changes its state and gets re-rendered. After that the appendTags function is recreated. The child component Student is recreated, too. Student's useEffect sees that one of the dependencies, appendTags, has changed, so it has to be re-executed. It calls the appendTags() and we have a loop.
To fix it, you need to wrap appendTags into useCallback hook inside the parent component:
const appendTags = useCallback((id, tags) => {
// update local state
}, []);
// ...
return <Student appendTags={appendTags} /* (...) */ />