Think of memoization as caching a value so that it does not need to be recalculated.<\/p>\n
The React useMemo Hook returns a memoized value.<\/p>\n
The useMemo Hook only runs when one of its dependencies update.This can improve performance.<\/p>\n
The useMemo and useCallback Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function. <\/p>\n
To fix this performance issue, we can use the useMemo Hook to memoize the expensiveCalculation function. This will cause the function to only run when needed.<\/p>\n
We can wrap the expensive function call with useMemo.<\/p>\n
The useMemoHook accepts a second parameter to declare dependencies. The expensive function will only run when its dependencies have changed.<\/p>\n
In the following example, the expensive function will only run when count is changed and not when todo’s are added.<\/p>\n
index.js<\/p>\n
import { useState, useMemo } from \"react\";\r\nimport ReactDOM from \"react-dom\/client\";\r\n\r\nconst App = () => {\r\n const [count, setCount] = useState(0);\r\n const [todos, setTodos] = useState([]);\r\n const calculation = useMemo(() => expensiveCalculation(count), [count]);\r\n\r\n const increment = () => {\r\n setCount((c) => c + 1);\r\n };\r\n const addTodo = () => {\r\n setTodos((t) => [...t, \"New Todo\"]);\r\n };\r\n\r\n return (\r\n <div>\r\n <div>\r\n <h2>My Todos<\/h2>\r\n {todos.map((todo, index) => {\r\n return <p key={index}>{todo}<\/p>;\r\n })}\r\n <button onClick={addTodo}>Add Todo<\/button>\r\n <\/div>\r\n <hr \/>\r\n <div>\r\n Count: {count}\r\n <button onClick={increment}>+<\/button>\r\n <h2>Expensive Calculation<\/h2>\r\n {calculation}\r\n <\/div>\r\n <\/div>\r\n );\r\n};\r\n\r\nconst expensiveCalculation = (num) => {\r\n console.log(\"Calculating...\");\r\n for (let i = 0; i < 1000000000; i++) {\r\n num += 1;\r\n }\r\n return num;\r\n};\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(<App \/>);\r\n\r\n<\/code><\/pre>\nuseCallback<\/h2>\n
The React useCallback Hook returns a memoized callback function.<\/p>\n
This allows us to isolate resource intensive functions so that they will not automatically run on every render.<\/p>\n
The useCallback Hook only runs when one of its dependencies update.This can improve performance.<\/p>\n
Problem<\/strong> : One reason to use useCallback is to prevent a component from re-rendering unless its props have changed.<\/p>\nSolution : <\/strong>To fix this, we can use the useCallback hook to prevent the function from being recreated unless necessary.<\/p>\nUse the useCallback Hook to prevent the Todos component from re-rendering needlessly:
\nindex.js<\/p>\n
import { useState, useCallback } from \"react\";\r\nimport ReactDOM from \"react-dom\/client\";\r\nimport Todos from \".\/Todos\";\r\n\r\nconst App = () => {\r\n const [count, setCount] = useState(0);\r\n const [todos, setTodos] = useState([]);\r\n\r\n const increment = () => {\r\n setCount((c) => c + 1);\r\n };\r\n const addTodo = useCallback(() => {\r\n setTodos((t) => [...t, \"New Todo\"]);\r\n }, [todos]);\r\n\r\n return (\r\n <>\r\n <Todos todos={todos} addTodo={addTodo} \/>\r\n <hr \/>\r\n <div>\r\n Count: {count}\r\n <button onClick={increment}>+<\/button>\r\n <\/div>\r\n <\/>\r\n );\r\n};\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(<App \/>);<\/code><\/pre>\nTodos.js<\/p>\n
import { memo } from \"react\";\r\n\r\nconst Todos = ({ todos, addTodo }) => {\r\n console.log(\"child render\");\r\n return (\r\n <>\r\n <h2>My Todos<\/h2>\r\n {todos.map((todo, index) => {\r\n return <p key={index}>{todo}<\/p>;\r\n })}\r\n <button onClick={addTodo}>Add Todo<\/button>\r\n <\/>\r\n );\r\n};\r\n\r\nexport default memo(Todos);<\/code><\/pre>\nNow the Todos component will only re-render when the todos prop changes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Think of memoization as caching a value so that it does not need to be recalculated. useMemo The React useMemo Hook returns a memoized value. The useMemo Hook only runs when one of its dependencies update.This can improve performance. The useMemo and useCallback Hooks are similar. The main difference is<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[107],"class_list":["post-2830","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=2830"}],"version-history":[{"count":1,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2830\/revisions"}],"predecessor-version":[{"id":2831,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2830\/revisions\/2831"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=2830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=2830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=2830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}