State Management in Pure React, v2
This course has been updated! We now recommend you take the React Performance course.
Table of Contents
IntroductionSteve Kinney gives an overview of topics that will covered in this course, explains that students will get to solve the main issues faced when working on state management in react, and talk about the tradeoffs of refactoring code.
Types of StateSteve explains that although there are different kinds of states in an application, the model state is the data in an application. How to manage the state or data is not clear cut, and is a decision an engineer has to make.
setState & ClassSteve demonstrates how to use class base state by live codes a simple counter component and demonstrating how to have counter in a class base state, it binds the previous state to the current one.
setState & AsynchronicitySteve explains that setState runs asynchronously, because react avoids unnecessary re-renders. If multiple cases of the same class containing setState are called multiple times, the last call will be the one executed.
setState & FunctionSteve demonstrates that different objects can be passed into setState, and focuses on the case of passing in a function. A function within a state can be useful when adding complicated logic to a growing application because it can be called multiple places while following the DRY principle.
setState & CallbackSteve demonstrates how to use a callback function called after the state is updated. Callbacks can be useful to get the new value of a state, and allow to avoid the use of the componentDidMount method, which in this case, would be a more verbose choice.
setState & Helper FunctionSteve live codes a helper function that stores a string at a given key. The helper function gets the current state from the local storage.
document.title ExerciseThe students are instructed to go update the document title every time the state has changed.
document.title SolutionSteve live codes the solution to the document.title exercise.
setState PatternsSteve covers what patterns can be problematic and better to avoid when working with setState. It is best practice to not include any property within a state, and avoid using state for elements that will not be rendered.
Refactoring & HooksSteve dives into hooks, demonstrates how to refactor code from class based state to hook based state, explains that hooks take one value, and no properties contrary to the previous class based state.
useEffect & DependenciesSteve continues the refactoring of code using the useEffect hook instead of a callback, and explains that If dependencies are not given to useEffect, it will run on every render of the component. This can become troublesome if the state is changed inside the useEffect hook because it will lead to infinite looping.
useEffect ExerciseThe students are instructed to read the initial value of state and store it as an object using useEffect.
useEffect SolutionSteve live codes the solution to the useEffect exercise.
Refactoring & Custom HookSteve demonstrates how to combine two hooks into one, and builds a custom hook called useLocalStorage to store local state. Local storage can be used by any component within the app, instead of using the useState.
Persisting State & useRefSteve explains that when using the useRef hook is a good way to have persistent data between renders, and know the difference between the old state and the new one.
useEffect & CleanupSteve demonstrates how the useEffect hook has the ability to cleans up a state that persists. Cleaning up a state that recurs can be useful in different instances such as a web sockets or intervals.
useReducer IntroductionSteve explains in which case useReducer is useful. When a function is rerendered many times, and it is not memoized, useReducer, a simplified version of Redux reducer, allows changes in state. A tour is given of the app students will be working on in this section.
Reducer Action & StateSteve defines a reducer as a function that takes two arguments, a current state, and an action, and demonstrates how to write a reducer function. With a reducer the management of the state from the components rendering the state.
Reducer Action Keys & dispatchSteve demonstrates continues to refactor the reducer from the previous section, adding action keys and a dispatch. Action keys manage the state, a dispatch determines what changes are allocated to the state.
Action & State Modification ExerciseThe students are instructed to build a new action, dispatch the action, and modify the state.
Action & State Modification SolutionSteve live codes the solution to the action and state modification exercise.
React.memo & useCallbackSteve explains that in order to avoid rendering a component with the same props, react.memo should be used to improve performance. useCallback is also a hook that is useful to improve performance, because it returns a memoized version of the callback that only changes if one of the dependencies has changed.
Prop Drilling & Context APISteve explains that prop drilling is the process to get data to parts of the React Component tree, and the Context API provides a way to share values between different components, without having to explicitly pass a prop through every level. The context API allows better performance.
Creating a Context ProviderSteve demonstrates how to build a context provider. A context provider allows the passing of data through the component tree without having to pass props down manually.
Context & useContext HookSteve demonstrates how to directly pull information from the context API with the useContext hook, without needing to update the state every time.
Context PracticeSteve demonstrates how to use the context API to create and delete new states, and talks about the trade offs that are direct results of switching to the context API.
Data Fetching & useEffect HookSteve starts working on another project in this course containing dummy data, demonstrates how to fetch data using the useEffect hook, and demonstrates how to fetch data from an API using the hook and building an endpoint component.
Response, Loading, & ErrorSteve refactors the code to include the response loading and error state, and uses the useFetch hook to get data.
Refactoring to a Custom HookSteve refactors code once again, builds a custom hook that fetches data from the url of the API, and explains that it is best practice to use hooks to fetch data instead of components.
What is a ThunkSteve defines a thunk as a function within a function, and explains that a thunk can be useful to use if code needs to be executed later since it gives a function that will dispatch an action once it receives results from an API.
useThunkReducer HookSteve demonstrates how to dispatch an action that is a function by using a reducer for each action that is a function, passing it, and calling it.
Dispatching, Reducers & HooksSteve demonstrates how to customized versions of dispatch by building independent dispatch functions that are linked to reducers.
Routing & ThunksSteve demonstrates how to fetch data from specific points within an API using the URL and the IDs within the URL, and how to declare all dependencies of the useEffect hook to be able to reload data, change the state, and make the UI change it.
Implementing Undo & RedoSteve demonstrates how to keep track of all past, present, and future states.
Undo ReducerSteve demonstrates how to implement the undo reducer to be able to submit and submit new states.
Redo Reducer ExerciseThe students are instructed to implement a redo reducer that will take the present state and transform it into the future state, and take the current state and make it into the past.
Redo Reducer SolutionSteve live codes the solution to the redo reducer exercise.
Managing State in a FormSteve demonstrates how to add reducers to simplify state management in a form, and avoid the use of the setState hook. The use of setState leads to more errors.