- 1.React Hooks are a newer and more efficient syntax for React components
- 2.Know how to write components in Hooks syntax
React Hooks are a newer and more efficient syntax for React Components. They allow us to write all components as functional components, and use so-called "Hook" functions to replace class component functionality such as state management and lifecycle methods. Components with hooks are functionally the same as class components.
Rocket recommends using Hooks in our exercises and projects from now on because Hooks are a cleaner syntax and the React team recommends using Hooks for new projects. The React team is re-writing the official React tutorials to use Hooks. React Router v6 (the latest and greatest version of React Router) that we are about to learn only supports React Hooks syntax natively, and Rocket recommends using Hooks to enable us to use the latest React Router features.
- 1.Many companies will still be using class components in their code. It will be important for us to still understand class components, but know how to write components with Hooks for new code to take advantage of latest React functionality.
This page is an overview of all of the subsequent tutorial pages. The subsequent pages go into more depth on each topic.
- 1.Note that from now on we will write only functional components and not class components. React Hooks provide all the functionality we needed from class components that we didn't previously have with functional components.
this.setStatewith a new pair of variables for getting and setting a specific state value.
- 3.Note how the React team encourages us to use multiple
useStateHooks in the same component for each type of state. There is no need to store all of a component's state in a single
this.stateobject like we did previously.
- 4.Returning a cleanup function from
useEffectis advanced functionality and we will not be using it as often at Rocket
- 5.We will not be writing custom Hooks at Rocket; feel free to skim through the "Building Your Own Hooks" section
- 6.We will learn about
useReducerhooks in a later submodule.
We will use the
useStateHook most often. Clear explanations of what the
useStateHook is and how to use it.
- 1.Rocket strongly recommends following the naming convention of
setXas the de-structured state variable names from
useState. This makes our code more readable because other engineers will immediately know what each variable is for.
React Hooks useState
At Rocket we will use
componentDidMountfor setting up subscriptions such as Firebase listeners and for data fetching.
useEffectalso allows us to perform functionality that was previously provided by
componentWillUnmount, but we will use that functionality less often.
- 1.As the docs mention, we can think of
useEffectas running after the component renders.
- 3.Returning a cleanup function from
useEffectis optional and we will not use it often at Rocket.
- 4.No need to worry too much about "Optimizing Performance by Skipping Effects"; we will rarely need this and we can come back to it once we're more familiar with using
useEffectand Hooks in general.
Rocket uses Create React App for our projects that includes the ESLint plugin for Hooks, so ESLint should enforce these rules for us by default.
React Hooks useEffect
Please checkout the finished code in this repository, ensure that you're on the
react_hooksbranch if you want to test out the application on your machine you will need to install the dependencies with the command
npm installafter the installation you can then run the application with the command
npm start. See if you can alter a React application on your machine from
class based componentsto
Complete all exercises in the following Codecademy lessons when they are assigned in the Rocket course schedule.
The following resources are optional and can be used more for reference than upfront reading.