With the introduction of React hooks since the 16.8 version, we have changed the way we write React application. Indeed, we can now leverage React features, such as state and side effects, within function components. However, it is not always easy to remember what hooks to use and how. That's why I've built this visual cheatsheet for you to master React Hooks. Actually, you will find more than just a basic single-page cheatsheet here. Indeed, I've included some real-world examples for each individual React hooks so that you can really understand how and where to use them. Want Your Own Copy? 🎁 Take the cheatsheet everywhere you go by downloading the PDF version . right here Table of Contents 1. State Hook - useState 2. Effect Hook - useEffect 3. Ref Hook - useRef 4. Callback Hook - useCallback 5. Context Hook - useContext 6. Memoization Hook - useMemo 7. Reducer Hook - useReducer 8. Custom Hook State Hook - useState React, { useState } ; import from 'react' - is a Hook that lets you add React state to function components. useState - returns the current state and a function to update it. useState - take as argument the initial state value. useState MyComponent = { [showModal, setShowModal] = useState( ); ( <button onClick={() => setShowModal(true)}>Show</button> <Modal /> ); }; const ( ) => props const false return < > div { show && } </ > div - can be used for multiple state variables. useState MyComponent = { [name, setName] = useState( ); [country, setCountry] = useState( ); ; }; const ( ) => props const "Greg" const "France" return Hello! I'm {name}, from {country}. < > div </ > div - can hold primitives, objects or arrays. useState [people, setPeople] = useState({ : , : }); const name "Greg" country "France" - always replace the state variable when updating it instead of merging it. useState - The update state function can accept a function. This function receives the previous state value, and returns an updated value. [people, setPeople] = useState({ : , : , : }); ... setPeople( { { ...prevState, : prevState.age + }; }); const name "Greg" country "France" age 28 => prevState return age 1 Effect Hook - useEffect React, { useEffect } ; import from 'react' - is a Hook that lets you perform "side effects" in function components, such as data fetching, manual DOM manipulation, and so on... useEffect - accepts a function as argument. useEffect - runs after every render. useEffect MyComponent = { [user, setUser] = useState({}); useEffect( { fetch( ) .then( res.json()) .then( setUser(data)); }); ( <li key={friend.id}>{friend.name}</li> ); }; const ( ) => { userId } const => () `http://api.example.com/v1/users/ ` ${userId} => res => data return { friends.map(friend => < > ul ) } </ > ul - accepts a second argument: the dependencies array. It tells React to run the effect function only if one of the dependencies as changed. useEffect - You can pass an empty array ([]) to run it only once. useEffect( { fetch( ) .then( res.json()) .then( setUser(data)); }, [userId]); => () `http://api.example.com/v1/users/ ` ${userId} => res => data - lets you clean up any effect you have used by returning clean up function. useEffect useEffect( { .addEventListener( , eventhandler); { .removeEventListener( , eventhandler); }; }, []); => () window "mousedown" return => () window "mousedown" Ref Hook - useRef React, { useRef } ; import from 'react' - lets you access DOM element. useRef MyComponent = { inputRef = useRef( ); useEffect( { inputRef.current.focus(); }); ( <input ref={inputRef} type="text" /> </form> const ( ) => props const null => () return < > form ); }; Callback Hook - useCallback React, { useCallback } ; import from 'react' - returns a memoized version of a callback. useCallback - accepts as arguments a callback and a dependencies array. useCallback - The callback only changes if one of the dependencies has changed. MyComponent = { ... const handleEventHandler = useCallback( { ( eventHandler === ) { eventHandler(event); } }, [eventHandler] ); ... const ( ) => { eventhandler } => event if typeof "function" Context Hook - useContext React, { useContext } ; import from 'react' - lets you read the context and subscribe to its changes from a function component. useContext - The context still needs to be created by and provided by a context component. React.createContext Provider - accepts as argument the context itself created by React.createContext. useContext - It returns the current context value for that context. UserContext = React.createContext( ); { [userName, setUserName] = useState( ); ( <Main /> <Header /> <UserInfo /> <Footer /> <div>Hello, {user.name}!</div> const null ( ) function App const "Greg" return < = }}> UserContext.Provider value {{ name: userName ); } const Main = (props) => ( </ > UserContext.Provider <> ); const UserInfo = (props) => { const user = useContext(UserContext); return </> ; }; Memoization Hook - useMemo React, { useMemo } ; import from 'react' - helps with performance optimization by returning a memoized value of an expensive computation. useMemo - accepts as arguments a function and a dependencies array. useMemo - will only recompute the memoized value if one of the dependencies has changed. useMemo MyComponent = { memoizedValue = useMemo( expensiveComputation(a, b), [a, b]); ... }; const ( ) => { a, b } const => () Reducer Hook - useReducer React, { useReducer } ; import from 'react' - lets you use reducers to manage your application state. This is an alternative to the state hook, . useReducer useState - accepts as argument a reducer of type . It returns the current state and a dispatch method. useReducer (state, action) => newState initialState = { : , : }; { (action.type) { : { : , : action.user }; : { : , : }; : state; } } { [state, dispatch] = useReducer(reducer, initialState); handleLogin = dispatch({ : , : { ... } ); handleLogout = dispatch({ : ); (state.isAuth) { ( <p>Welcome, {state.user.name}!</p> <button onClick={handleLogout}>Logout</button> <button onClick={handleLogin}>Login</button> const isAuth false user null ( ) function reducer state, action switch case "login" return isAuth true user case "logout" return isAuth false user null default return ( ) function App const const => () type 'login' user const => () type 'logout' if return <> ); } return </> ; } Custom Hook - You can create your own React hooks to extract component logic into reusable functions. { useEffect, useCallback } ; { handleEventHandler = useCallback( { ( handler === ) { handler(event); } }, [handler] ); useEffect( { checked = element && element.addEventListener; (!checked) ; element.addEventListener(eventName, handleEventHandler); { element.removeEventListener(name, handleEventHandler); }; }, [name, element, handleEventHandler] ); } import from "react" // Custom React Hook export default ( ) function useEventListener name, handler, element const => event if typeof "function" => () // Check if the element supports the addEventListener method const // Stop here if not supported if return // Add event listener // Remove event listener on cleanup return => () What's Next There are so many concepts to learn in order to master React completely. However, thanks to this cheatsheet you will be ready to start writing your application with modern React. Feel free to download the complete PDF version of this cheatsheet . right here (Disclaimer: The Author is the Instructor at AlterClass)
