# React State: Choose Wisely

DevFeed: [React State: Choose Wisely](<https://devfeed.tech/articles/react-state-choose-wisely-21880.md>)

Original publisher: [Read original article](<https://ponyfoo.com/articles/react-state-choose-wisely>)

Author: jsmapr1@gmail.com (Joe Morgan)

Published: 2019-03-19T13:22:59Z

Content type: tutorial

Language: en

Sources: [Pony Foo](<https://devfeed.tech/sources/pony-foo.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Redux](<https://devfeed.tech/topics/redux.md>), [context](<https://devfeed.tech/topics/context.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [redux](<https://devfeed.tech/tags/redux.md>), [state](<https://devfeed.tech/tags/state.md>), [state-management](<https://devfeed.tech/tags/state-management.md>)

## AI overview

This tutorial compares three approaches to managing state in React: local component state, global state using Redux, and Context. It evaluates them by implementation speed, data encapsulation, and accessibility from other components.

## Source excerpt

Proper state handling in React will make your components simple and maintainable. Poor choices will give you lots of headaches in the long-term. There are plenty of options for managing state in a React app. But there's very little guidance about which one you should use in any situation. Let's fix that. The solution you pick to manage state should fit they way you want to use the items you hold in state. Your choice should also make it easy for you to update, reuse, and refactor your code. In other words, your choice of state management can make your life easy or hard. Here's a non-exhaustive list of things you should consider: How quickly can you add new state code? How well encapsulated is your stateful data? How easy is it to pull the data into a new component? Let's use this list as a basis for comparing different ways of handling state. To do this, we'll make the same simple component using three different forms of state handling. By making the same thing three ways, you'll get a few nice perspectives. First, you'll see that any approach can solve any problem. This is important because if you know that you can solve nearly any problem with any form of state management, you can turn your attention from the technical problem of getting it working, to the more abstract problem of making it work well in your over all application. Second, by making the same thing three ways, you'll start to see the subtle differences which can become big headaches as an applications grows. What are the three ways to manage state? Local State: State stored directly on the component. Global State: A global store. In this example, you'll use redux. Context: A newer API that lets you access state higher up the tree. Using the three points of comparison and the three ways of managing state, you'll be able to build a nice table that will let you compare the different options. Local Global Context Easy ? ? ? Encapsulated ? ? ? Available ? ? ? Alright. Let's get started. You'll be making a