State & Lifecycle

A component needs state when some data associated with it changes over time. More info

Articles & Tutorials

What Is "Lifting State Up" in React? (
May 06, 2021
Here is a simple and practical example what it means to "lift state up" in React, and how it can help you build your applications.
  • Reed Barger
How State Works in React – Explained with Code Examples (
Apr 05, 2021
State is the most complex thing in React, and it's something both beginners and experienced developers struggle to understand. So in this article, we'll explore all the basics of state in React.
  • Yogesh Chavan
The Three Kinds of React State (
May 29, 2020
No matter what it is you're building with React, when you boil it down, there are only three ways you can manage data 1 in a React app: locally, parentally, and remotely.
  • Kyle Shevlin
How to update state from props in React (
May 18, 2020
It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props.
How to manage React State with Arrays (
May 17, 2020
This tutorial walks you through the most common scenarios for managing arrays in React state. For each I want to show you a array example in React state, such as how to push an item to an array or how to update an item in an array, when React state is used to store it.
Replacing React Lifecycle Methods with Hooks: A Comprehensive Guide (
May 04, 2020
Using Hooks to replace componentDidMount, componentWillUnmount, componentWillReceiveProps, componentDidUpdate.
  • John Au-Yeung
React.js for Beginners — Props and State Explained (
Feb 09, 2020
Understanding what props and state are and the differences between them is a big step towards learning React.
  • Cem Eygi
React: "mount" vs "render"? (
Jan 31, 2020
Learning something new can come with a bunch of new terms. So what's the difference between "mounting" and "rendering" in React?
  • Brad Westfall
useEffect(fn, []) is not the new componentDidMount() (
Jan 31, 2020
They're almost the same. But there's actually just enough of a difference to possibly get you into trouble -- especially if you're refactoring from classes.
  • Brad Westfall
Using setState in React (
Dec 19, 2019
This article shows how React components can use state to store information. This can be useful when a component needs to save some data in addition to props provided by a parent component. For example, a form component can store values entered by a user or a calendar component can store a selected date.
  • Dmitry Rogozhny
React Fundamentals: Props vs State (
Jul 08, 2019
What's the difference between props and state in React?
React: Understanding State & Lifecycle (
May 23, 2019
In this article we’re going to look at how State & Lifecycle work in React. This knowledge is really powerful, as it helps us separate concerns, add dynamism, and build truly reusable components.
  • Timothy Robards
A React Lift State Up & Down Example (
May 22, 2019
In order to experience up and down lifting of local state, the following tutorial will demonstrate it with two examples.
The Circle of a React Lifecycle (
Apr 23, 2019
We’re going to look at each lifecycle in this post, including the methods that are available to them and the types of scenarios we’d use them.
  • Kingsley Silas
A guide to useState in React (
Mar 19, 2019
useState is a hook that allows you to have state variables in functional components.
  • Esteban Herrera
React17, or how to get rid of “componentWillReceiveProps”? (
Mar 14, 2019
As you may already know, with the release of React 16.3, some of legacy lifecycles were deprecated.
  • Giedrius Vičkus
Managing Derived State from Props in React (
Dec 12, 2018
Patterns and Anti-patterns for managing State based on Props.
  • Ramachandran R
How to change the state of a child component from its parent in React (
Nov 05, 2018
We will be building a simple React app which shows the real name of a superhero on a button click.
  • Johny Thomas
Prevent React setState on unmounted Component (
Oct 21, 2018
How to avoid the React warning: Can only update a mounted or mounting component.
How to become a pro with React setState() in 10 minutes (
Oct 06, 2018
This article is aimed at people who have already had their first approach to React, and who, as beginners, have doubts about how setState works and how to use it correctly.
  • Eduardo Vedes
These React Fundamentals You Skip may be Killing You (
Oct 05, 2018
Often times, the inability to debug a certain error stems from not understanding some foundational concept.
  • Ohans Emmanuel
React Global State without Redux (
Oct 02, 2018
A tutorial to showcase how to use React global state without Redux. There are React patterns that can be used to have an application wide state in React without a state management library.
How to prevent a rerender in React (
Sep 11, 2018
A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components.
You Probably Don't Need Derived State (
Jun 07, 2018
In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.
Why Not To Modify React State Directly (
Jun 01, 2018
Everyone (and the React docs) say not to mutate state directly. Here's a live example of what happens when you do.
Understanding React `setState` (
Apr 25, 2018
At the end of this tutorial, you should know how setState works, and be able to avoid common pitfalls that many of us hit when when learning React.
  • Kingsley Silas
Update on Async Rendering (
Mar 27, 2018
We’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.
React State From the Ground Up (
Mar 19, 2018
State is hugely important in React, and perhaps a big reason you’ve looked into using React in the first place. Let’s take a stab at understanding what state is and how it works.
  • Kingsley Silas
Revisiting use of React’s Component Life Cycle Hooks in Anticipation of Async Rendering (
Dec 09, 2017
If you’ve browsed the documentation, or kept an eye on the advice from the core React team, you’ve probably read that you shouldn’t handle subscriptions or side-effects in the constructor or componentWillMount.
  • Alex Brown
componentDidMakeSense  -  React Component Lifecycle Explanation (
Oct 16, 2017
Learn the React lifecycle methods and when/how to use them.
  • Trey Huffine
Handling State in React: Four Immutable Approaches to Consider (
Jun 03, 2017
Perhaps the most common point of confusion in React today: state.
React Lifecycle Methods - how and when to use them (
Mar 28, 2017
Through lifecycle methods, we can then control what happens when each tiny section of your UI renders, updates, thinks about re-rendering, and then disappears entirely.
  • Scott Domes
Where to Fetch Data: componentWillMount vs componentDidMount (
Mar 21, 2017
When you need to fetch some data for a React component, where do you do it?
Functional setState is the future of React (
Mar 03, 2017
So today I reveal to you a new functional gold buried in React, best kept React secret — Functional setState!
  • Justice Mba
A Visual Guide to State in React (
Oct 19, 2016
React's "state" is one of the more difficult concepts to learn. Not just what to put in state, but what it actually is and what it’s for. And also how Redux is related to React state. I hope to clear up some of the confusion in this article.

Video Guides & Talks

Stepping through React's code for lifecycles and setState (
Aug 23, 2018
Let's pop open the debugger and see what React is doing when it calls our lifecycle methods and when we call setState.
Avoid setState warnings on unmounted React components (
Jul 05, 2018
If you're doing any async stuff in your React component and the callback calls this.setState, you need to either cancel the async stuff or take care to not call setState if the component is unmounted.
React 16.3 Lifecycle Methods (
Apr 23, 2018
React lifecycles, they seem absolutely crucial, but really you'll use them for loading data and not much else. Sometimes for 3rd party library integration or making declarative animations.
Rename Unsafe Lifecycle Hooks with react-codemod (
Apr 17, 2018
In this video we’ll look at how to refactor an existing React code-base using jscodeshift and react-codemod. In particular we’ll be using one of the scripts to automatically prepend React’s unsafe lifecycle hooks with UNSAFE_.
Polyfill React 16.3 New Lifecycle Hooks (
Apr 12, 2018
In this video we’ll look at how to bring backwards compatibility when using the new React 16.3 lifecycle hooks. The react-lifecycles-compat polyfill will allow the getDerivedStateFromProps and getSnapshotBeforeUpdate methods to work in older versions of React.
How stateful rendering makes your job easy (
Apr 11, 2018
Your UI is an expression of state. Manipulate the state, change the UI. Never worry about the rendering.
Why you need both state and props (
Apr 10, 2018
Both state and props are just JavaScript values that you use when rendering JSX. So why do you need both?
Use state in React (
Oct 18, 2017
We're going to build this stopwatch component. We'll start by hacking away at rerendering our whole app and passing props to it, then we'll migrate that mess to React state to make it clean and isolated.
Demystifying setState() - ReactRally (
Aug 30, 2017
A talk about setState by Justice Mba
  • Justice Mba

Books & Guides

Reintroducing React (
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
  • Ohans Emmanuel

Courses & Video Series

Leverage New Features of React 16 (
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.
React: Lifecycles (
Aug 09, 2017
Optimize your React components by utilizing the power of React lifecycle methods
  • Carl Peaslee

Podcast Episodes

State In React (
Aug 14, 2019
In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!