DEV Community

Lem Dulfo
Lem Dulfo

Posted on

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

#react #reactnative #tutorial #learning

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}
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

💬 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

Top comments (0)