Logo

dev-resources.site

for different kinds of informations.

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

Published at
1/6/2025
Categories
react
reactnative
tutorial
learning
Author
bytehala
Author
8 person written this
bytehala
open
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}
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

reactnative Article's
30 articles in total
Favicon
Using Direct Line botframework in a React Native Application to connect to Copilot Studio Agent
Favicon
[Video]Build a Full-Stack Mobile App with React Native Expo and Payload CMS in 2025!
Favicon
Introducing EAS Hosting: Simplified deployment for modern React apps
Favicon
Auto Resize multiline TextInput in React Native
Favicon
Read Text Asset File in Expo
Favicon
Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle
Favicon
Building High-Performance React Native Apps[Tips for Developers]
Favicon
React Native With TypeScript: Everything You Need To Know
Favicon
Building the 'One of a Kind' Ultimate Mobile App Framework. Seeking exceptional engineers to join the journey.
Favicon
Ship mobile apps faster with React-Native-Blossom-UI
Favicon
Encryption in React Native apps enhances data security, protecting user information and ensuring privacy. However, it also presents challenges, such as performance overhead and complex implementation
Favicon
How to Integrate Stack, Bottom Tab, and Drawer Navigator in React Native
Favicon
🌎 Seamless Multi-Language Support in React Native
Favicon
Mastering React Native with TypeScript: From Basics to Brilliance - Part 1
Favicon
Building "Where Am I?": A GeoGuessr Alternative for Mobile
Favicon
React Native is powerful modern technology
Favicon
How to Build a Centered Input Field for Amounts in React Native
Favicon
Compound Component pattern in react
Favicon
Pop Quiz: Is There a Bug in This React Native Component?
Favicon
The Unlikely Fix: How a Simple Folder Change Saved My React Native Journey
Favicon
How to Integrate Stack and Bottom Tab Navigator in React Native
Favicon
How to make a view expand downwards in an inverted FlatList?
Favicon
Building a Custom Star Rating Component in React Native with Sliding and Press Interactions
Favicon
Choosing the Right Compiler for React Native Development in 2025
Favicon
Simple remove transition animation in react native
Favicon
How to Hire Dedicated React Native Developers for Customizable Features
Favicon
React Native’s New Architecture: Sync and async rendering
Favicon
Top Mobile App Development Company in Bangalore | Hyena IT
Favicon
Mastering Import Order in React: A Deep Dive Into Best Practices and Tools
Favicon
Creating Custom Inputs for Regex Validation in React and React Native

Featured ones: