📄 Table of Contents

Class component showing how to use this.setState
Functional component showing how to use useState

➪ Using useRef As useState Replacement

function TextInputWithFocusButton() {  const inputEl = useRef(null);  const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
}; return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}

Translating a useState example to useRef

import { useRef } from "react"

Summing up

➪ useMemo and useCallback

➪ useState()

With useState hook the initial value of the state, the method to update the state, and the current value of the state everything can be written in a single line of code.
This syntax is known as
Array Destructuring which is one of the features of ES6.

useState with the previous value of state

useState with Object

When dealing with Objects or Arrays, always make sure to spread your state variable and then call the setter function

➪ useEffect

Class component demonstrating the use of lifecycle methods
Functional component showing an example of using useEffect

When we first used the useEffect hook to mimic componentDidMount, we passed an empty array as the second argument. Because there is an empty array in the second argument, this string will no longer be logged to the console during if the component is rendered again. To mimic componentDidUpdate, we will add the dependency in an array as the second argument.

➪ useReducer

function usersReducer(state, action) {
switch (action.type) {
case "LOADING": {
return { loading: true, users: null, error: null };
}
case "LOADED": {
return { loading: false, users: action.users, error: null };
}
case "ERROR": {
return { loading: false, users: null, error: action.error };
}
default: {
throw new Error(`Unhandled action type: ${action.type}`);
}
}
}
function UsersList() {
const [state, dispatch] = React.useReducer(usersReducer, {
users: null,
loading: false,
error: null
});
function getUsers() {
dispatch({ type: "LOADING" });
fetchUsers().then(
users => {
dispatch({ type: "LOADED", users });
},
error => {
dispatch({ type: "ERROR", error });
}
);
}
}
function UsersList() {
const [users, setUsers] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null); function getUsers() {
setLoading(true);
setError(null);
setUsers(null); fetchUsers().then(
users => {
setLoading(false);
setError(null);
setUsers(users);
},
error => {
setLoading(false);
setError(error);
setUsers(null);
}
);
}
}➪ useContext

➪ useContext

➪ useLayoutEffect

If you want the previous behavior (of firing useEffect before the UI is painted) that's where useLayoutEffect comes in.

➪ useQuery

import { useQuery } from "react-query"

Conclusion

--

--

--

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Love podcasts or audiobooks? Learn on the go with our new app.

Moving to Non-Relational Database? Here is what you should know as a developer

Building a Game With TypeScript. Colors and Layers

Free Error reporting in Expo Apps with expo-error-log

Purescript III: Web Pages with Purescript and React!

Sort Characters By Frequency

How to Unroll a Matrix Array

A Short Future-Reference for Debugging, Security Issues, and API Usage (Yelp API) with React Native

Building Distributed GraphQL Service

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Kumar

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

More from Medium

GETTING STARTED WITH EXPRESS JS

First Phase — Introduce yourself

Using Fast JSON API Gem

Contract Testing and State: Moving from Integration tests to Contract Tests.

a picture of an engine