How to Manage State in React

#383 – November 21, 2022

React state management is a process for managing the data that React components need in order to render themselves. This data is typically stored in the component's state object. When the state object changes, the component will re-render itself.

While there’s wide adoption of TypeScript, there are still a lot of teams that don’t use it but are interested in adopting it for their React projects. Read about what to watch for before you make the switch.

When using function components in React, we may want to type their props with TypeScript. Overall there are two ways of making a React component type safe with TypeScript, however, let's start by converting the following JavaScript React component to a TypeScript React component as leading example.

Today we are going to build a mobile app with React Native and - eBay style!

You can use useReducer to implement a state machine and clean up your ternary soup. It won't have the safety guarantees of XState or the built-in support for side effects (called actions in xstate), but it's going to be a state machine.

We adopted GraphQL in Bison to give our apps end-to-end type checking, with type safety from the database all the way to the UI. It’s served us well, and has been the API layer for dozens of apps developed by Echobind.

As an (aspiring) Junior React developer it’s hard to understand if your code is any good and how you can improve it. It would be great to get a review from an experienced dev. But sharing your code takes guts. And the reviews you get in online communities are often shallow.