Chapter 29: Handling Application State

From early on in this book, you've been using state to control your React components. State is an important concept in any React application because it controls what the user can see and interact with. Without state, you just have a bunch of empty React components.

In this chapter, you'll learn how to handle a more complex application state. Then, you'll learn how to build an architecture that best serves web and mobile architectures. You'll also be introduced to Context, followed by a discussion on the limitations of React architectures, and how you might overcome them using external libraries.

This chapter has the following sections:

• Organizing state in React
• Implementing Context
• State in mobile apps
• Scaling the architecture

Technical requirements

You can find the code files present in this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-4th-Edition/tree/main/Chapter29.

Organizing state in React

It can be difficult to think of user interfaces (UIs) as information architecture. Often, you get a rough idea of how the UI should look and behave and then you implement it. I do this all the time, and it's a great way to get the ball rolling, to discover issues with your approach early, and so on. But then, I like to take a step back and picture what's happening without any widgets. Inevitably, what I've built is flawed in terms of how state flows through the various components. This is fine; at least I have something to work with now. I just have to make sure that I address the information architecture before building too much.

As your application grows in size and there are more pages and components that need to interact with state, the way we have used state in this book might not be sufficient anymore. Therefore, it makes sense to split up your application state into reducers and Context. We can do this with Context, which will be explained...

Implementing Context

With Context, we can implement the application state, as you'll learn in this chapter. To implement Context, we'll create a basic React application that needs state. The application itself will be a news application. It's a simple app, but I want to highlight the architectural challenges as I walk through the implementation. Even simple apps get complex when you're paying attention to what's going on with the data.

We'll build the web version, and then you could implement the same patterns on a React Native app for iOS and Android. You'll see how you can share architectural concepts between your apps. This lowers the conceptual overhead when you need to implement the same application on several platforms.

You're implementing two apps right now, but this will likely be more in the future as React expands its rendering capabilities.

Creating Context

The basis of implementing Context for a React application is importing...

Managing state in mobile apps

What about using Context in React Native mobile apps? Of course, you should if you're developing the same application for the web and for native platforms. In fact, you could copy and paste all the Context-related code to a React Native application and use it to handle state. I encourage you to download the code for this book and convert the application from this chapter to React Native as an exercise.

There really is no difference in how you use Context in a mobile app. The only difference is in the shape of the state that's used. In other words, don't think that you can use the exact same Context and reducer functions in the web and native versions of your app. Think about React Native components. There's no one-size-fits-all component for many things. You have some components that are optimized for the iOS platform, while others are optimized for the Android platform. It's the same idea with Context. The information that...

Scaling the architecture

By now, you probably have a pretty good grip of using Context, combining it with reducer functions, and using it to implement sound information architecture for React applications. The question then becomes, how sustainable is this approach, and can it handle arbitrarily large and complex applications?

Context is a good way to handle the state for your application if this state isn't continuously updated. By dividing your Context into different smaller Context instances, it becomes more scalable. You can predict what's going to happen as the result of any given action because everything is explicit. It's declarative, it's unidirectional, and without side effects. But, it isn't without challenges.

The limiting factor with Context is also its bread and butter; because everything is explicit, applications that need to scale up in terms of feature count and complexity ultimately end up with more moving parts. There's nothing...

Summary

In this chapter, you learned about Context. With Context, you can handle state for any React application. In combination with reducer functions, you can use it for building information architecture for your React application. State in React involves unidirectional data flow, synchronous update rounds, and predictable state transformations.

Next, we walked through a detailed implementation of a React application that uses Context. Context provides an implementation for complex state situations, the benefit of which is predictability everywhere.

Then, you learned whether Context has what it takes to build scalable architectures for our React applications. The answer is yes, for the most part. For the remainder of this book, however, we're going to explore GraphQL to see whether these technologies can scale your applications to the next level. In the next chapter, you'll learn about the concepts of GraphQL and what it means for a React application.

Further reading

For more information, check out the following links:

• Context: https://reactjs.org/docs/context.html
• React Query: https://react-query.tanstack.com/