{"id":1487,"date":"2024-03-18T12:23:38","date_gmt":"2024-03-18T15:23:38","guid":{"rendered":"https:\/\/benjaminray.com\/codebase\/?p=1487"},"modified":"2024-08-17T19:31:58","modified_gmt":"2024-08-17T22:31:58","slug":"memoize-react-components-to-prevent-unnecessary-renders","status":"publish","type":"post","link":"https:\/\/benjaminray.com\/codebase\/memoize-react-components-to-prevent-unnecessary-renders\/","title":{"rendered":"Memoize React Components to Prevent Unnecessary Renders"},"content":{"rendered":"

When the state of a React component changes, the component and all of its children will re-render. While this is fine for most cases, you may have a child component that does some heavy computation, and you may want it only to render when its state or properties have changed, not every time the parent has changed. This is where component memoization comes in handy.<\/p>\n

You can easily memoize a component by wrapping the component in memo(). You can either export a memoized version of an existing component, or you can make the component always memoized. Examples of both are below.<\/p>\n

\n

Heads up: memo() is different from useMemo(). useMemo() is for storing values between renders, not components.<\/p>\n<\/blockquote>\n

This child component will render every time the parent's state changes:<\/p>\n

\/\/ Parent component:\nimport { ChildComponent } from ".\/ChildComponent";\nexport const ParentComponent = ({ parentProp1 }) => {\n  console.log("ParentComponent last rendered at:", new Date().toLocaleTimeString());\n  return (\n    <div>\n      Amazing parent content with props {parentProp1}\n      <ChildComponent prop1="test 1" prop2="test 2" \/>\n    <\/div>\n  );\n};\n\n\n\/\/Non-memoized child component:\nexport const ChildComponent = ({ prop1, prop2 }) => {\n  console.log("ChildComponent last rendered at:", new Date().toLocaleTimeString());\n  return (\n    Amazing child component content with props {prop1} and {prop2}\n  );\n};\n<\/code><\/pre>\n
Option 1 - Export a separate memoized version of the component:<\/h2>\n
\/\/ Non-memoized child component with a memoized export:\nimport { memo } from "react";\nexport const ChildComponent = ({ prop1, prop2 }) => {\n  console.log("ChildComponent last rendered at:", new Date().toLocaleTimeString());\n  return (\n    Amazing child component content with props {prop1} and {prop2}\n  );\n};\nexport const MemoizedChildComponent = memo(ChildComponent);\n\n\/\/ Use the memoized version of the child component:\n<MemoizedChildComponent prop1="test 1" prop2="test 2" \/>\n\n\/\/ Use the original, non-memoized version of the child component:\n<ChildComponent prop1="test 1" prop2="test 2" \/>\n\n<\/code><\/pre>\n
Your parent component can now reference either the memoized version using <MemoizedChildComponent \/><\/code>, or the non-memoized version using <ChildComponent \/><\/code>. This is useful
\nif you need both options.<\/p>\n
Option 2 - Make the component always memoized:<\/h2>\n
\/\/ Memoized child component\nimport { memo } from "react";\nexport const ChildComponent = memo(function ChildComponent({ prop1, prop2 }) {\n  console.log("ChildComponent last rendered at:", new Date().toLocaleTimeString());\n  return (\n    Amazing child component content with props {prop1} and {prop2}\n  );\n});\n<\/code><\/pre>\n
Your parent component will continue to reference the memoized version using <ChildComponent \/><\/code>.<\/p>\n
Callback Functions as Properties Break Memoization Without useCallback()<\/h2>\n
If you are passing a callback function as a property to the child, memoizing the component is not enough to avoided the extra renders. The callback function will appear by the child to be different every time the parent's state changes, which will trigger the child to re-render every time the parent re-renders. To fix this, you can memoize the function in the parent component using useCallback(), and pass the output of useCallback() as a property to the child. That will allow the memoized child component to render as expected: only when child properties (including callback functions) have actually changed.<\/p>\n
\/\/ Memoized child component with callback function as parameter\nimport { memo } from "react";\nexport const ChildComponent = memo(function ChildComponent({prop1, onClickCallback}) {\n  console.log("ChildComponent last rendered at:", new Date().toLocaleTimeString());\n  return (\n    <div>\n      Amazing child component content with props {prop1} and a callback function\n      <button onClick={() => onClickCallback()}>click me to notify the parent<\/button>\n    <\/div>\n  );\n});\n\n\/\/ Revised parent component using useCallback() to memoize a callback function sent to the child\nimport { useCallback } from "react";\nimport { ChildComponent} from ".\/ChildComponent";\nexport const ParentComponent = ({ parentProp1 }) => {\n  console.log("ParentComponent last rendered at:", new Date().toLocaleTimeString());\n  const childComponentOnClick = useCallback(() => console.log("Child component click callback in parent."), []);\n  return (\n    <div>\n      Amazing parent content with props {parentProp1}\n      <ChildComponent prop1="test 1" onClickCallback={childComponentOnClick} \/>\n    <\/div>\n  );\n};\n<\/code><\/pre>\n
Can you just memoize the child properties in the parent instead?<\/h2>\n
You might think that memoizing the properties for the child component in the parent component would possibly prevent the child from re-rendering. However, since a child component that accepts no<\/em> properties will always render when the parent renders, passing down memoized properties to the child won't stop that behaviour. So no, memozing the properties in the parent before passing to the child won't stop the extra child renders.<\/p>\n","protected":false},"excerpt":{"rendered":"
When the state of a React component changes, the component and all of its children will re-render. While this is fine for most cases, you may have a child component  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[28],"tags":[38,36,30],"class_list":["post-1487","post","type-post","status-publish","format-standard","hentry","category-react","tag-component","tag-memo","tag-react"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GNjN-nZ","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/comments?post=1487"}],"version-history":[{"count":24,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1487\/revisions"}],"predecessor-version":[{"id":2531,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1487\/revisions\/2531"}],"wp:attachment":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/media?parent=1487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/categories?post=1487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/tags?post=1487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}