State & Lifecycle

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.

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.

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.

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.

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.

Using Hooks to replace componentDidMount, componentWillUnmount, componentWillReceiveProps, componentDidUpdate.

Understanding what props and state are and the differences between them is a big step towards learning React.

Learning something new can come with a bunch of new terms. So what's the difference between "mounting" and "rendering" in React?

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.

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.

Let's pop open the debugger and see what React is doing when it calls our lifecycle methods and when we call setState.

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 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.

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_.

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.

Your UI is an expression of state. Manipulate the state, change the UI. Never worry about the rendering.

Both state and props are just JavaScript values that you use when rendering JSX. So why do you need both?

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.

Modern React with Every React Update Since v16 Demystified (includes advanced hooks)

React 16 comes with some powerful new features, in this course we'll be exploring each of them.

Optimize your React components by utilizing the power of React lifecycle methods

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!