This course has been updated! We now recommend you take the React Performance course.
Table of Contents
Introduction
Introduction
Steve 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 State
Steve 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.
Class-Based State
setState & Class
Steve 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 & Asynchronicity
Steve 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 & Function
Steve 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 & Callback
Steve 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 Function
Steve 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 Exercise
The students are instructed to go update the document title every time the state has changed.
document.title Solution
Steve live codes the solution to the document.title exercise.
setState Patterns
Steve 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.
Hooks State
Refactoring & Hooks
Steve 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 & Dependencies
Steve 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 Exercise
The students are instructed to read the initial value of state and store it as an object using useEffect.
useEffect Solution
Steve live codes the solution to the useEffect exercise.
Refactoring & Custom Hook
Steve 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 & useRef
Steve 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 & Cleanup
Steve 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.
Reducers
useReducer Introduction
Steve 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 & State
Steve 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 & dispatch
Steve 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 Exercise
The students are instructed to build a new action, dispatch the action, and modify the state.
Action & State Modification Solution
Steve live codes the solution to the action and state modification exercise.
React.memo & useCallback
Steve 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.
Context
Prop Drilling & Context API
Steve 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 Provider
Steve 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 Hook
Steve demonstrates how to directly pull information from the context API with the useContext hook, without needing to update the state every time.
Context Practice
Steve 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
Data Fetching & useEffect Hook
Steve 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, & Error
Steve refactors the code to include the response loading and error state, and uses the useFetch hook to get data.
Refactoring to a Custom Hook
Steve 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.
Refactoring to a Custom Reducer
Steve argues that reducers are easier to test and easy JavaScript functions, and demonstrates how to refactor the code to mainly use reducers.
Thunks
What is a Thunk
Steve 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 Hook
Steve 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 & Hooks
Steve demonstrates how to customized versions of dispatch by building independent dispatch functions that are linked to reducers.
Routing & Thunks
Steve 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 & Redo
Steve demonstrates how to keep track of all past, present, and future states.
Undo Reducer
Steve demonstrates how to implement the undo reducer to be able to submit and submit new states.
Redo Reducer Exercise
The 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 Solution
Steve live codes the solution to the redo reducer exercise.
Managing State in a Form
Steve 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.
