How do I update state but not trigger the infinite useEffect loop?

Question

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

Nikita Skrebets · Accepted Answer · 2021-12-10 13:51:04Z

1

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} /* (...) */ />

answered Dec 10, 2021 at 13:51

Nikita Skrebets

1,5422 gold badges15 silver badges21 bronze badges

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

3 Comments

Moon Shine Over a year ago

Your solution doesn't work. Whenever a student component re-renders, the student tags are missing.

Nikita Skrebets Over a year ago

@MoonShine could you post the code of both components so I can sort out the problem? Or share a link to project on a site like codesandbox?

Moon Shine Over a year ago

I've solved it. Thank you.

Collectives™ on Stack Overflow

How do I update state but not trigger the infinite useEffect loop?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related