Managing State in React 18

Deciding How to Handle State

Cory House
React Consultant and Trainer

@housecor | reactjsconsulting.com
Version Check
This course was created by using:
- React 18
- React Router 6
Version Check

This course is 100% applicable to:

- React 16 - 18
Target Audience

Relatively new to React Want to improve state skills

Prerequisites

Understand JSX
Know how to declare a component
Mostly function components
Patterns presented work in classes too

Dedicated class component module

Agenda Goal: Establish mental model
History of React State
Eight ways to handle state
- Deciding how to handle state

JavaScript data structures

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks

*View in presentation mode

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks

*View in presentation mode

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks

*View in presentation mode

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks

*View in presentation mode

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks

*View in presentation mode

A History of React State

Initial Release
2015 2018
Class only
Redux Context API
Experimental context

2014 2015 2019

Flux Stateless Function components Hooks
State
App data that may change
Eight Ways to Handle State
Side Note: Environment Variables

Store environment-specific settings

Don’t change at runtime
Supported on all operating systems
Built into create-react-app
- REACT_APP_BASE_URL
- REACT_APP_ENABLE_FEATURE_X
Examples
- Base URLs
- Feature toggles
Eight Ways to Handle React State

URL

Web storage

Local state

Lifted state

Derived state

Refs

Context

Third party library

Option 1: URL

Current app location/settings

- Current item
- Filters
- Pagination
- Sorting
Supports deep linking
Avoid redundantly storing in your app

Consider React Router

Option 2: Web Storage

Persist state between reloads

- cookies, localStorage, IndexedDB

Watch out
- Tied to a single browser
- Avoid storing sensitive data

Examples
- Items in shopping cart
- Partially completed form data
Option 3: Local State

Store state inside a React component

- Useful when one component needs it

Example
- Forms
- Toggles
- Local lists
Option 4: Lifted State

Lift state to a common parent

- Declare state in a parent component
- Pass state down via props

Use: Related components need same state

Option 5: Derived State

Derive state from existing state/props

Examples
- Call .length on an array in render
- Derive errorsExist by checking if the errors
array is empty.
Why derive?
- Avoids out of sync bugs
- Simplifies code
Option 6: Refs

1. DOM reference
- Uncontrolled components
- Interfacing with non-React libraries
2. State that isn’t displayed
- Track if component is mounted
- Hold timer
- Store previous state value
Option 7: Context

Global / broadly used state and functions

- Avoids “prop drilling”
Examples
- Logged in user
- Authorization settings
- Theming
- Internationalization settings
Option 8: Third Party State

General options
- Redux
- Mobx
- Recoil
Remote State
- react-query
- Swr
- Relay
- Apollo
Eight Ways to Handle React State

URL Sharable app location

Web storage Persist between sessions, one browser

Local state Only one component needs the state

Lifted state A few related components need the state

Derived state State can be derived from existing state

Refs DOM reference, state that isn’t rendered

Context Global or subtree state

Third party library Global state, Remote state

JavaScript Data Structures

Immutable Mutable reference

Primitives Collections

Boolean true/false Objects properties

String text
Array list
Number numbers
Map key/value pairs
BigInt big numbers
Set unique values
Symbol unique id
 History of React State

Summary
A History of React State

Initial Release
Aug 2015 Mar 2018
Class only
Redux Context API
Experimental context

Sept 2014 Oct 2015 Feb 2019

Flux Stateless Function components Hooks

*View in presentation mode

 History of React State
Eight ways to handle state
Summary
Eight Ways to Handle React State

URL Sharable app location

Web storage Persist between sessions, one browser

Local state Only one component needs the state

Lifted state A few related components need the state

Derived state State can be derived from existing state

Refs DOM reference, state that isn’t rendered

Context Global or subtree state

Third party library Global state, Remote state

 History of React State
Eight ways to handle state
Summary
JS data structures
JavaScript Data Structures

Immutable Mutable reference

Primitives Collections

Boolean true/false Objects properties

String text
Array list
Number numbers
Map key/value pairs
BigInt big numbers
Set unique values
Symbol unique id
Up Next:

Managing Local and Remote State