Phase 2: React Native & Cross-Platform

useState, useReducer & React Context

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you're building a super cool LEGO city on a giant baseplate. Your city has lots of different parts: houses, cars, trees, little people. Each of these parts is like a small 'component' in a program – a self-contained piece that does its own thing. Sometimes, a tiny part of your city needs to change something simple about itself. Maybe your LEGO car needs to switch its color from red to blue, or you want to make its doors open and close. For these simple, quick changes, you use something called useState. It's like giving that specific LEGO car a little instruction card that says, "If someone flips this switch, change to blue!" or "Push here to open the door!" It's perfect for when only that one piece needs to know about and control its own small changes, like a car changing its own color.

But what if your LEGO city's traffic system is really complicated? You have lots of cars, traffic lights, and pedestrians all moving around. If car A moves, then traffic light B needs to turn red, and pedestrian C has to wait. Trying to manage all those tiny, interconnected changes with lots of individual 'instruction cards' for each piece would be a huge mess! That's when you use useReducer. Think of useReducer as a master traffic controller for a whole section of your city. Instead of tiny instruction cards, you give the traffic controller a big rulebook. When something big happens, like a car trying to cross an intersection (that's an 'action'), you just tell the controller, "Hey, a car wants to cross!" The controller looks at its rulebook and figures out all the precise steps needed to update the traffic lights, move other cars, and tell pedestrians when it's safe to cross. This makes sure everything changes smoothly and correctly, even when many things depend on each other. It’s a much tidier way to handle complex situations than having every single LEGO piece try to figure it out on its own.

Even with your clever traffic controller, you still have a challenge: what if there's a super important rule that everyone in the whole LEGO city needs to know? Like, "All roads in the city must be grey" or "All buildings must be at least 10 bricks tall." You wouldn't want to run around to every single builder working on every single house, car, or park, and tell them this rule individually. That would take forever and be easy to forget! This is where React Context comes in. Imagine hanging a giant "City-Wide Rules" blueprint right in the middle of your main city hall. Any builder, no matter if they're working on a house in a quiet neighborhood or a car deep inside the traffic system, can just walk to city hall and look at the blueprint to see the main rules for the entire city. You don't have to shout the rule to them directly. This means important information, like the overall theme or specific city guidelines, is always available to anyone who needs it, without you having to manually pass it down through every single part of your huge LEGO city. So, when you build your own apps, you'll use these tools to manage all the different pieces of information, whether it's a small detail for one part or a big rule for the whole thing!

As you build React Native applications, managing component state efficiently becomes crucial. The foundational hook for local component state is useState. It's your go-to for simple, self-contained data within a single component, like a boolean to toggle a modal, a string for an input field, or a number for a counter. useState is intuitive and perfect when the state doesn't need to be shared widely across your application or when its updates are straightforward and don't depend heavily on previous complex state.

When your component's state logic becomes more complex – perhaps involving multiple related sub-states, or when state transitions depend on the previous state in intricate ways – useReducer steps in. Inspired by Redux, useReducer centralizes state update logic outside the component in a dedicated 'reducer' function, which handles dispatched 'actions'. This pattern makes complex state logic more predictable, testable, and maintainable. However, both useState and useReducer primarily manage state locally or for direct parent-child communication via props, leading to a common problem known as "prop-drilling" when data needs to reach deeply nested components.

To overcome prop-drilling, React offers Context. Context is not a state management solution itself, but a powerful mechanism to deliver data (state, functions, etc.) down the component tree without explicitly passing props at every level. You create a Context, a Provider wraps the components that need access to the state, and useContext allows any nested component to subscribe to that state. Often, Context is paired with useState or useReducer in the Provider component to actually manage the shared state, then distribute it efficiently. Choose useState for simple, local state, useReducer for complex, local state logic, and Context for sharing state (managed by useState or useReducer) across disparate components in your application.

Key Takeaways

  • useState is for simple, local component state.
  • useReducer is for complex state logic, centralizing updates via a reducer function.
  • React Context is a delivery mechanism to share state across components without prop-drilling.
  • Context typically uses useState or useReducer internally to manage the actual state it distributes.
  • Choose the right tool based on state complexity and how widely the state needs to be shared.

Code Example

javascript
Preview

How this code works

This code demonstrates how to manage a global application state, specifically a theme (dark or light mode), and make it accessible to multiple components without manually passing props down through every level of the component tree. This is achieved using React's useState for local state management and createContext along with useContext for sharing that state across components.

First, createContext(null) creates a ThemeContext object, acting as a channel for theme-related data. The null here is the default value, which is usually overridden by a Provider further down. The ThemeProvider component then uses useState(false) to declare isDarkTheme as a boolean state, initially false (light mode). It wraps its children with ThemeContext.Provider, passing the isDarkTheme state and its setIsDarkTheme updater function through the value prop, making them available to any component nested inside ThemeProvider.

The ThemeToggler component then illustrates how to consume this state. It uses useContext(ThemeContext) to access the isDarkTheme state and setIsDarkTheme function directly from the context, without needing to receive them as props. This allows the Switch component to display the current theme state and update it when toggled, demonstrating how components deep in the tree can interact with shared state efficiently.

Resources

Related Articles

Hand-picked reads to go deeper on state management in react native.

Back to Mobile Developer Roadmap