Pop Quiz: Is There a Bug in This React Native Component?

The code below has no IDE or compiler warnings, but is there a bug?

const MyComponent = (props: MyComponentProps) => {
  const {loading, error, data} = useQuery(GET_ALL_USERS);

  useEffect(() => {
    props.onLoadingStateChange(loading);
  }, [loading, props]);

  return (
    <UserList
      {...props}

Take a moment to look at the code and think about it.

---

Click to Reveal the Answer

Answer: Yes! Kind of.

(If you answered yes, consider your answer correct.)
Technically, it's not a bug but a subtle performance pitfall.

Because the useEffect depends on props, it the side effect will run when any attribute inside props has changed.

The fix:

  const { onLoadingStateChange } = props; // destructure, so the dependency array is more specific
  useEffect(() => {
    onLoadingStateChange(loading);
  }, [loading, onLoadingStateChange]);

💬 NOTE
This might seem like a contrived example that doesn't happen in real life, but I assure you: seeing this during code review prompted me to write the article.

Did you get it right? Please don't spoil the answer in the comments.
❤️ - you got it right
🤯 - didn't get it right, but learned something