While on a co-working session in the VirtualCoffee community, the topic veered into converting a class-based React component to a functional React component. I had zero experience to add here but I mentioned that after a few months of learning about React in the Open Sauced I had finally gotten to write some code with useEffect() and I felt like I knew why it worked! Others on the call encouraged me to mention it in a blog so here we are.

The Open Sauced app helps you to organize your plans for open source contributions by tracking a list of "goals". The related issues for this PR dealt with adding and removing items in the list of goals, and the UI not reflecting the changes made. I had a handful of earlier PRs that were chipping away at the underlying problems and this was the one that was going to put a nail in it. For reference here’s the PR: https://github.com/open-sauced/open-sauced/pull/1220

The first few lines of the React component were these:

function ListGoals({goals, data}) {
  const goalsWithData = merge(goals.nodes, data || []);
  const [listGoals, setGoals] = useState(goalsWithData);
  const [searchTerm, setSearchTerm] = useState("");
  // The PR added these three lines
  useEffect(() => {
    setGoals(merge(goals.nodes, data));
  }, [goals, data]);
  // ... other stuff and render function that uses "listGoals" value
}

The general issue we had was that the listGoals value is what really drives what's rendered, but it's not directly influenced by changes in the goals and data props. For this reason, adding or removing goals would cause a change in the goals prop but the listGoals value wasn't being affected. The useEffect call in the PR cleaned that up, and I think the React FAQ talks about it here.

So the GIF above is in reference to this PR that closed two issues that were several months old. They weren't old because they were stale, in my opinion - they were aging because there were several related things that needed to be cleaned up prior to getting to this point. Altogether I call this a "righteous PR"!

As I mentioned, there were several other issues and PRs related to this, so I'm going to be writing some posts that talk about that process unfolding. Stay tuned!