State & Lifecycle

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

Articles & Tutorials

The Circle of a React Lifecycle (css-tricks.com)
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 (blog.logrocket.com)
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”? (itnext.io)
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 (blog.bitsrc.io)
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 (medium.freecodecamp.org)
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 (robinwieruch.de)
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 (medium.freecodecamp.org)
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 (medium.freecodecamp.org)
Oct 05, 2018
Often times, the inability to debug a certain error stems from not understanding some foundational concept.
  • Ohans Emmanuel
How to manage React State with Arrays (robinwieruch.de)
Oct 04, 2018
Learn how to manipulate arrays in React state by using JavaScript array methods such as concat, map and filter. Whereas vanilla JavaScript is used for the arrays, React is only used to set the new state in the end.
React Global State without Redux (robinwieruch.de)
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 (robinwieruch.de)
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 (reactjs.org)
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 (daveceddia.com)
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` (css-tricks.com)
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 (reactjs.org)
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 (css-tricks.com)
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 (medium.freecodecamp.org)
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 (levelup.gitconnected.com)
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 (medium.freecodecamp.org)
Jun 03, 2017
Perhaps the most common point of confusion in React today: state.
React Lifecycle Methods - how and when to use them (engineering.musefind.com)
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 (daveceddia.com)
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 (medium.freecodecamp.org)
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 (daveceddia.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
Aug 30, 2017
A talk about setState by Justice Mba
  • Justice Mba

Books & Guides

Reintroducing React (leanpub.com)
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 (egghead.io)
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.
React: Lifecycles (lynda.com)
Aug 09, 2017
Optimize your React components by utilizing the power of React lifecycle methods
  • Carl Peaslee