React Hooks

32 flashcards · Programming Languages · by Orlando Flores

memoizedValue is the value that will be memoized and returned.
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
The function passed to useMemo will only re-run when one of the dependencies has changed.
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
The dependencies array is optional; if omitted, the memoized value will only be computed once.
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
memoizedValue is the value that will be memoized and returned. The function passed to useMemo will only re-run when one of the dependencies has changed. The dependencies array is optional; if omitted, the memoized value will only be computed once.
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
memoizedValue is the value that will be memoized and returned. The function passed to useMemo will only re-run when one of the dependencies has changed. The dependencies array is optional; if omitted, the memoized value will only be computed once.
const memoizedValue = useMemo(() => { // Compute the value here return computeValue(); }, [dependency1, dependency2, ...]);
memoizedValue is the value that will be memoized and returned. The function passed to useMemo will only re-run when one of the dependencies has changed. The dependencies array is optional; if omitted, the memoized value will only be computed once.
Initializes state in a function component and provides a function to update it. [state, setState] = useState(initialState);
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
Initializes state in a function component and provides a function to update it.
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
Initializes state in a function component and provides a function to update it. [state, setState] = useState(initialState);
Runs side effects after every render, or only when certain values change if specified. useEffect(() => { // side effect }, [dependencies]);
import React, { useEffect, useState } from 'react'; function FetchData() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const jsonData = await response.json(); setData(jsonData); }; fetchData(); }, []); // Empty dependency array: run effect only once on mount return ( <div> {data ? ( <p>Fetched data: {JSON.stringify(data)}</p> ) : ( <p>Loading...</p> )} </div> ); }
import React, { useEffect, useState } from 'react'; function FetchData() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const jsonData = await response.json(); setData(jsonData); }; fetchData(); }, []); // Empty dependency array: run effect only once on mount return ( <div> {data ? ( <p>Fetched data: {JSON.stringify(data)}</p> ) : ( <p>Loading...</p> )} </div> ); }
Runs side effects after every render, or only when certain values change if specified. Usage: useEffect(() => { // side effect }, [dependencies]);
import React, { useEffect, useState } from 'react'; function FetchData() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const jsonData = await response.json(); setData(jsonData); }; fetchData(); }, []); // Empty dependency array: run effect only once on mount return ( <div> {data ? ( <p>Fetched data: {JSON.stringify(data)}</p> ) : ( <p>Loading...</p> )} </div> ); }
Runs side effects after every render, or only when certain values change if specified. Usage: useEffect(() => { // side effect }, [dependencies]);
import React, { useState, useEffect } from 'react'; function Greeting() { const [currentTime, setCurrentTime] = useState(new Date().getHours()); // Initial time const [greeting, setGreeting] = useState(''); useEffect(() => { const determineGreeting = () => { if (currentTime < 12) { setGreeting('Good Morning!'); } else if (currentTime < 18) { setGreeting('Good Afternoon!'); } else { setGreeting('Good Evening!'); } }; determineGreeting(); // Call initially // Cleanup function (not strictly necess…
Runs side effects after every render, or only when certain values change if specified. Usage: useEffect(() => { // side effect }, [dependencies]);
import React, { useState, useEffect } from 'react'; function Greeting() { const [currentTime, setCurrentTime] = useState(new Date().getHours()); // Initial time const [greeting, setGreeting] = useState(''); useEffect(() => { const determineGreeting = () => { if (currentTime < 12) { setGreeting('Good Morning!'); } else if (currentTime < 18) { setGreeting('Good Afternoon!'); } else { setGreeting('Good Evening!'); } }; determineGreeting(); // Call initially // Cleanup function (not strictly necess…
Runs side effects after every render, or only when certain values change if specified. Usage: useEffect(() => { // side effect }, [dependencies]);
The child components can consume the context using the useContext Hook
import { useContext } from 'react'; import { UserContext } from './context'; function MyChildComponent() { const currentUser = useContext(UserContext); return <span>{currentUser}</span>; }
import { useContext } from 'react'; import { UserContext } from './context'; function MyChildComponent() { const currentUser = useContext(UserContext); return <span>{currentUser}</span>; }
The child components can consume the context using the useContext Hook
import { createContext } from 'react'; export const MyContext = createContext("");
First, you need to create a context object using the createContext function from the 'react' library
This function returns an object with two properties: { Provider, Consumer } Consumer is an older way to read context (though it’s recommended to use useContext instead.
import { createContext } from 'react'; export const MyContext = createContext("");
First, you need to create a context object using the createContext function from the 'react' library
import { createContext } from 'react'; export const MyContext = createContext("");
This context object will hold the data that you want to share across your application.
import { createContext } from 'react'; export const MyContext = createContext("");
By convention, we use the name "Entity" + "Context" because we want to pass as value data related to that entity.
import { createContext } from 'react'; export const EntityContext = createContext("");
In addition, we use capital letter because we will use it later as component and components must be capitalized.
import { createContext } from 'react'; export const EntityContext = createContext("");
Once you've created a context object, you need to wrap the components that need access to the shared data with a Provider component.
// Create a parent component that wraps child components with a Provider import { useState, React } from "react"; import { MyContext } from "./MyContext"; import MyComponent from "./MyComponent"; function App() { const [text, setText] = useState(""); return ( <div> <MyContext.Provider value={{ text, setText }}> <MyComponent /> </MyContext.Provider> </div> ); } export default App;
// Create a parent component that wraps child components with a Provider import { useState, React } from "react"; import { MyContext } from "./MyContext"; import MyComponent from "./MyComponent"; function App() { const [text, setText] = useState(""); return ( <div> <MyContext.Provider value={{ text, setText }}> <MyComponent /> </MyContext.Provider> </div> ); } export default App;
Once you've created a context object, you need to wrap the components that need access to the shared data with a Provider component.
The Provider component accepts a "value" prop that holds the shared data, and any component that is a child of the Provider component can access that shared data.
// Create a parent component that wraps child components with a Provider import { useState, React } from "react"; import { MyContext } from "./MyContext"; import MyComponent from "./MyComponent"; function App() { const [text, setText] = useState(""); return ( <div> <MyContext.Provider value={{ text, setText }}> <MyComponent /> </MyContext.Provider> </div> ); } export default App;
// Create a parent component that wraps child components with a Provider import { useState, React } from "react"; import { MyContext } from "./MyContext"; import MyComponent from "./MyComponent"; function App() { const [text, setText] = useState(""); return ( <div> <MyContext.Provider value={{ text, setText }}> <MyComponent /> </MyContext.Provider> </div> ); } export default App;
The Provider component accepts a "value" prop that holds the shared data, and any component that is a child of the Provider component can access that shared data.
To consume the context in other components, we use the "useContext" hook from React.
import { useContext } from 'react'; import { MyContext } from './MyContext'; function MyComponent() { const { text, setText } = useContext(MyContext); return ( <div> <h1>{text}</h1> <button onClick={() => setText('Hello, world!')}> Click me </button> </div> ); } export default MyComponent;
import { useContext } from 'react'; import { MyContext } from './MyContext'; function MyComponent() { const { text, setText } = useContext(MyContext); return ( <div> <h1>{text}</h1> <button onClick={() => setText('Hello, world!')}> Click me </button> </div> ); } export default MyComponent;
To consume the context in other components, we use the "useContext" hook from React.
... drilling can make your code more difficult to read and maintain, and can also make it harder to refactor your components later on.
Prop
Prop drilling can make your code more difficult to read and maintain, and can also make it harder to ... your components later on.
refactor
import { createContext } from 'react'; export const MyContext = createContext("");
This context object will hold the data that you want to share across your application.
By convention, custom Hooks start with the keyword use*.
nano src/components/App/useToken.js