The useReducer Hook is similar to the useState Hook.
It allows for custom state logic.
If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful.
React useRef Hook
The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.
React useContext Hook
React Context
React Context is a way to manage state globally.
It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.
React useEffect Hooks
The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency>)
React useState Hook
The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an application.
Import useState
To use the useState Hook, we first need to import it into our component.
Example:
At the top of your component, import the useState Hook.
import { useState } from "react";
Notice that we are destructuring useState from react as it is a named export.
To learn more about destructuring, check out the ES6 section.
React Hooks
Hooks were added to React in version 16.8.
Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.
Although Hooks generally replace class components, there are no plans to remove classes from React.
Styling React Using Sass
What is Sass
Sass is a CSS pre-processor.
Sass files are executed on the server and sends CSS to the browser.
Can I use Sass?
If you use the create-react-app in your project, you can easily install and use Sass in your React projects.
Install Sass by running this command in your terminal:
npm i sass
Now you are ready to include Sass files in your project!
Styling React Using CSS
There are many ways to style React with CSS, this tutorial will take a closer look at three common ways:
- Inline styling
- CSS stylesheets
- CSS Modules
React Memo
Using memo will cause React to skip rendering a component if its props have not changed.
This can improve performance.
This section uses React Hooks. See the React Hooks section for more information on Hooks.
React Router
Create React App doesn’t include page routing.
React Router is the most popular solution.
Add React Router
To add React Router in your application, run this in the terminal from the root directory of the application:
npm i -D react-router-dom
Note: This tutorial uses React Router v6.
If you are upgrading from v5, you will need to use the @latest flag:
npm i -D react-router-dom@latest