https://dmitripavlutin.com/component---src-components-pages-post-f…react-memo-index-md-33569efa3216bbb857fa.js

1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[6933],{9434:function(e,o,t){t.r(o),t.d(o,{default:function(){return f}});var n=t(7294),r=t(1151),s=t(9794);const c={annotations:s.ds,Code:s.EK},a={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"one-dark-pro",type:"dark",semanticHighlighting:!0,semanticTokenColors:{enumMember:{foreground:"#56b6c2"},"variable.constant":{foreground:"#d19a66"},"variable.defaultLibrary":{foreground:"#e5c07b"},"variable:dart":{foreground:"#d19a66"},"property:dart":{foreground:"#d19a66"},"annotation:dart":{foreground:"#d19a66"},"parameter.label:dart":{foreground:"#abb2bf"},macro:{foreground:"#d19a66"}},tokenColors:[{settings:{foreground:"#abb2bf",background:"#282c34"}},{scope:"meta.embedded",settings:{foreground:"#abb2bf"}},{name:"unison punctuation",scope:"punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison",settings:{foreground:"#e06c75"}},{name:"haskell variable generic-type",scope:"variable.other.generic-type.haskell",settings:{foreground:"#c678dd"}},{name:"haskell storage type",scope:"storage.type.haskell",settings:{foreground:"#d19a66"}},{name:"support.variable.magic.python",scope:"support.variable.magic.python",settings:{foreground:"#e06c75"}},{name:"punctuation.separator.parameters.python",scope:"punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python",settings:{foreground:"#abb2bf"}},{name:"variable.parameter.function.language.special.self.python",scope:"variable.parameter.function.language.special.self.python",settings:{foreground:"#e5c07b"}},{name:"variable.parameter.function.language.special.cls.python",scope:"variable.parameter.function.language.special.cls.python",settings:{foreground:"#e5c07b"}},{name:"storage.modifier.lifetime.rust",scope:"storage.modifier.lifetime.rust",settings:{foreground:"#abb2bf"}},{name:"support.function.std.rust",scope:"support.function.std.rust",settings:{foreground:"#61afef"}},{name:"entity.name.lifetime.rust",scope:"entity.name.lifetime.rust",settings:{foreground:"#e5c07b"}},{name:"variable.language.rust",scope:"variable.language.rust",settings:{foreground:"#e06c75"}},{name:"support.constant.edge",scope:"support.constant.edge",settings:{foreground:"#c678dd"}},{name:"regexp constant character-class",scope:"constant.other.character-class.regexp",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:["keyword.operator.word"],settings:{foreground:"#c678dd"}},{name:"regexp operator.quantifier",scope:"keyword.operator.quantifier.regexp",settings:{foreground:"#d19a66"}},{name:"Text",scope:"variable.parameter.function",settings:{foreground:"#abb2bf"}},{name:"Comment Markup Link",scope:"comment markup.link",settings:{foreground:"#5c6370"}},{name:"markup diff",scope:"markup.changed.diff",settings:{foreground:"#e5c07b"}},{name:"diff",scope:"meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff",settings:{foreground:"#61afef"}},{name:"inserted.diff",scope:"markup.inserted.diff",settings:{foreground:"#98c379"}},{name:"deleted.diff",scope:"markup.deleted.diff",settings:{foreground:"#e06c75"}},{name:"c++ function",scope:"meta.function.c,meta.function.cpp",settings:{foreground:"#e06c75"}},{name:"c++ block",scope:"punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c",settings:{foreground:"#abb2bf"}}

1,{name:"js/ts punctuation separator key-value",scope:"punctuation.separator.key-value",settings:{foreground:"#abb2bf"}},{name:"js/ts import keyword",scope:"keyword.operator.expression.import",settings:{foreground:"#61afef"}},{name:"math js/ts",scope:"support.constant.math",settings:{foreground:"#e5c07b"}},{name:"math property js/ts",scope:"support.constant.property.math",settings:{foreground:"#d19a66"}},{name:"js/ts variable.other.constant",scope:"variable.other.constant",settings:{foreground:"#e5c07b"}},{name:"java type",scope:["storage.type.annotation.java","storage.type.object.array.java"],settings:{foreground:"#e5c07b"}},{name:"java source",scope:"source.java",settings:{foreground:"#e06c75"}},{name:"java modifier.import",scope:"punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java",settings:{foreground:"#abb2bf"}},{name:"java modifier.import",scope:"meta.method.java",settings:{foreground:"#61afef"}},{name:"java modifier.import",scope:"storage.modifier.import.java,storage.type.java,storage.type.generic.java",settings:{foreground:"#e5c07b"}},{name:"java instanceof",scope:"keyword.operator.instanceof.java",settings:{foreground:"#c678dd"}},{name:"java variable.name",scope:"meta.definition.variable.name.java",settings:{foreground:"#e06c75"}},{name:"operator logical",scope:"keyword.operator.logical",settings:{foreground:"#56b6c2"}},{name:"operator bitwise",scope:"keyword.operator.bitwise",settings:{foreground:"#56b6c2"}},{name:"operator channel",scope:"keyword.operator.channel",settings:{foreground:"#56b6c2"}},{name:"support.constant.property-value.scss",scope:"support.constant.property-value.scss,support.constant.property-value.css",settings:{foreground:"#d19a66"}},{name:"CSS/SCSS/LESS Operators",scope:"keyword.operator.css,keyword.operator.scss,keyword.operator.less",settings:{foreground:"#56b6c2"}},{name:"css color standard name",scope:"support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss",settings:{foreground:"#d19a66"}},{name:"css comma",scope:"punctuation.separator.list.comma.css",settings:{foreground:"#abb2bf"}},{name:"css attribute-name.id",scope:"support.constant.color.w3c-standard-color-name.css",settings:{foreground:"#d19a66"}},{name:"css property-name",scope:"support.type.vendored.property-name.css",settings:{foreground:"#56b6c2"}},{name:"js/ts module",scope:"support.module.node,support.type.object.module,support.module.node",settings:{foreground:"#e5c07b"}},{name:"entity.name.type.module",scope:"entity.name.type.module",settings:{foreground:"#e5c07b"}},{name:"js variable readwrite",scope:"variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node",settings:{foreground:"#e06c75"}},{name:"js/ts json",scope:"support.constant.json",settings:{foreground:"#d19a66"}},{name:"js/ts Keyword",scope:["keyword.operator.expression.instanceof","keyword.operator.new","keyword.operator.ternary","keyword.operator.optional","keyword.operator.expression.keyof"],settings:{foreground:"#c678dd"}},{name:"js/ts console",scope:"support.type.object.console",settings:{foreground:"#e06c75"}},{name:"js/ts support.variable.property.process",scope:"support.variable.property.process",settings:{foreground:"#d19a66"}},{name:"js console function",scope:"entity.name.function,support.function.console",settings:{foreground:"#61afef"}},{name:"keyword.operator.misc.rust",scope:"keyword.operator.misc.rust",settings:{foreground:"#abb2bf"}},{name:"keyword.operator.sigil.rust",scope:"keyword.operator.sigil.rust",settings:{foreground:"#c678dd"}},{name:"operator",scope:"keyword.operator.delete",settings:{foreground:"#c678dd"}},{name:"js dom",scope:"support.type.object.dom",settings:{foreground:"#56b6c2"}},{name:"js dom variable",scope:"support.variable.dom,support.variable.property.dom",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:"keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational",settings:{foreground:"#56b6c2"}},{name:"C operator assignment",scope:"keyword.operator.assignment.c,

1keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp",settings:{foreground:"#c678dd"}},{name:"Punctuation",scope:"punctuation.separator.delimiter",settings:{foreground:"#abb2bf"}},{name:"Other punctuation .c",scope:"punctuation.separator.c,punctuation.separator.cpp",settings:{foreground:"#c678dd"}},{name:"C type posix-reserved",scope:"support.type.posix-reserved.c,support.type.posix-reserved.cpp",settings:{foreground:"#56b6c2"}},{name:"keyword.operator.sizeof.c",scope:"keyword.operator.sizeof.c,keyword.operator.sizeof.cpp",settings:{foreground:"#c678dd"}},{name:"python parameter",scope:"variable.parameter.function.language.python",settings:{foreground:"#d19a66"}},{name:"python type",scope:"support.type.python",settings:{foreground:"#56b6c2"}},{name:"python logical",scope:"keyword.operator.logical.python",settings:{foreground:"#c678dd"}},{name:"pyCs",scope:"variable.parameter.function.python",settings:{foreground:"#d19a66"}},{name:"python block",scope:"punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python",settings:{foreground:"#abb2bf"}},{name:"python function-call.generic",scope:"meta.function-call.generic.python",settings:{foreground:"#61afef"}},{name:"python placeholder reset to normal string",scope:"constant.character.format.placeholder.other.python",settings:{foreground:"#d19a66"}},{name:"Operators",scope:"keyword.operator",settings:{foreground:"#abb2bf"}},{name:"Compound Assignment Operators",scope:"keyword.operator.assignment.compound",settings:{foreground:"#c678dd"}},{name:"Compound Assignment Operators js/ts",scope:"keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts",settings:{foreground:"#56b6c2"}},{name:"Keywords",scope:"keyword",settings:{foreground:"#c678dd"}},{name:"Namespaces",scope:"entity.name.namespace",settings:{foreground:"#e5c07b"}},{name:"Variables",scope:"variable",settings:{foreground:"#e06c75"}},{name:"Variables",scope:"variable.c",settings:{foreground:"#abb2bf"}},{name:"Language variables",scope:"variable.language",settings:{foreground:"#e5c07b"}},{name:"Java Variables",scope:"token.variable.parameter.java",settings:{foreground:"#abb2bf"}},{name:"Java Imports",scope:"import.storage.java",settings:{foreground:"#e5c07b"}},{name:"Packages",scope:"token.package.keyword",settings:{foreground:"#c678dd"}},{name:"Packages",scope:"token.package",settings:{foreground:"#abb2bf"}},{name:"Functions",scope:["entity.name.function","meta.require","support.function.any-method","variable.function"],settings:{foreground:"#61afef"}},{name:"Classes",scope:"entity.name.type.namespace",settings:{foreground:"#e5c07b"}},{name:"Classes",scope:"support.class, entity.name.type.class",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:"entity.name.class.identifier.namespace.type",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:["entity.name.class","variable.other.class.js","variable.other.class.ts"],settings:{foreground:"#e5c07b"}},{name:"Class name php",scope:"variable.other.class.php",settings:{foreground:"#e06c75"}},{name:"Type Name",scope:"entity.name.type",settings:{foreground:"#e5c07b"}},{name:"Keyword Control",scope:"keyword.control",settings:{foreground:"#c678dd"}},{name:"Control Elements",scope:"control.elements, keyword.operator.less",settings:{foreground:"#d19a66"}},{name:"Methods",scope:"keyword.other.special-method",settings:{foreground:"#61afef"}},{name:"Storage",scope:"storage",settings:{foreground:"#c678dd"}},{name:"Storage JS TS",scope:"token.storage",settings:{foreground:"#c678dd"}},{name:"Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void",scope:"keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void",settings:{foreground:"#c678dd"}},{name:"Java Storage",scope:"token.storage.type.java",settings:{foreground:"#e5c07b"}},{name:"Support",scope:"support.function",settings:{foreground:"#56b6c2"}},{name:"Support type",scope:"support.type.property-name",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.property-value",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.font-name",settings:{foreground:"#d19a66"}},{name:"Meta tag",scope:"meta.tag",settings:{foreground:"#abb2bf"}},{name:"Strings",scope:"string",settings:{foreground:"#98c379"}},{name:"Constant other symbol",scope:"constant.other.symbol",settings:{foreground:"#56b6c2"}},{name:"Integers",scope:"constant.numeric",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"constant",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"punctuation.definition.constant",settings:{foreground:"#d19a66"}},{name:"Tags",scope:"entity.name.tag",settings:{foreground:"#e06c75"}},{name:"Attributes",scope:"entity.other.attribute-name",settings:{foreground:"#d19a66"}},{name:"Attribute IDs",scope:"entity.other.attribute-name.id",settings:{fontStyle:"normal",foreground:"#61afef"}},{name:"Attribute class",scope:"entity.other.attribute-name.class.css",settings:{fontStyle:"normal",foreground:"#d19a66"}},{name:"Selector",scope:"meta.selector",settings:{foreground:"#c678dd"}},{name:"Headings",scope:"markup.heading",settings:{foreground:"#e06c75"}},{name:"Headings",scope:"markup.heading punctuation.definition.heading, entity.name.section",settings:{foreground:"#61afef"}},{name:"Units",scope:"keyword.other.unit",settings:{foreground:"#e06c75"}},{name:"Bold",scope:"markup.bold,todo.bold",settings:{foreground:"#d19a66"}},{name:"Bold",scope:"punctuation.definition.bold",settings:{foreground:"#e5c07b"}},{name:"markup Italic",scope:"markup.italic, punctuation.definition.italic,todo.emphasis",settings:{foreground:"#c678dd"}},{name:"emphasis md",scope:"emphasis md",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown headings",scope:"entity.name.section.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown heading Punctuation Definition",scope:"punctuation.definition.heading.markdown",settings:{foreground:"#e06c75"}},{name:"punctuation.definition.list.begin.markdown",scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown heading setext",scope:"markup.heading.setext",settings:{foreground:"#abb2bf"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Bold",scope:"punctuation.definition.bold.markdown",settings:{foreground:"#d19a66"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.string.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw punctuation",scope:"punctuation.definition.raw.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown List Punctuation Definition",scope:"punctuation.definition.list.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition String",scope:["punctuation.definition.string.begin.markdown","punctuation.definition.string.end.markdown","punctuation.definition.metadata.markdown"],settings:{foreground:"#e06c75"}},{name:"beginning.punctuation.definition.list.markdown",scope:["beginning.punctuation.definition.list.markdown"],settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Link",scope:"punctuation.definition.metadata.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Underline Link/Image",scope:"markup.underline.link.markdown,markup.underline.link.image.markdown",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown Link Title/Description",scope:"string.other.link.title.markdown,string.other.link.description.markdown",settings:{foreground:"#61afef"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw",scope:"markup.raw.monospace.asciidoc",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw Punctuation Definition",scope:"punctuation.definition.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc List Punctuation Definition",scope:"markup.list.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc underline link",scope:"markup.link.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Asciidoc link name",scope:"string.unquoted.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#61afef"}},{name:"Regular Expressions",scope:"string.regexp",settings:{foreground:"#56b6c2"}},{name:"Escape Characters",scope:"constant.character.escape",settings:{foreground:"#56b6c2"}},{name:"Embedded",scope:"punctuation.section.embedded, variable.

1interpolation",settings:{foreground:"#e06c75"}},{name:"Embedded",scope:"punctuation.section.embedded.begin,punctuation.section.embedded.end",settings:{foreground:"#c678dd"}},{name:"illegal",scope:"invalid.illegal",settings:{foreground:"#ffffff"}},{name:"illegal",scope:"invalid.illegal.bad-ampersand.html",settings:{foreground:"#abb2bf"}},{name:"Broken",scope:"invalid.broken",settings:{foreground:"#ffffff"}},{name:"Deprecated",scope:"invalid.deprecated",settings:{foreground:"#ffffff"}},{name:"Unimplemented",scope:"invalid.unimplemented",settings:{foreground:"#ffffff"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json",scope:"source.json meta.structure.dictionary.json > string.quoted.json",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String",scope:"source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation",scope:"source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",settings:{foreground:"#98c379"}},{name:"Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json",scope:"source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json",settings:{foreground:"#56b6c2"}},{name:"[VSCODE-CUSTOM] JSON Property Name",scope:"support.type.property-name.json",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] JSON Punctuation for Property Name",scope:"support.type.property-name.json punctuation",settings:{foreground:"#e06c75"}},{name:"laravel blade tag",scope:"text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",settings:{foreground:"#c678dd"}},{name:"laravel blade @",scope:"text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",settings:{foreground:"#c678dd"}},{name:"use statement for other classes",scope:"support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php",settings:{foreground:"#e5c07b"}},{name:"error suppression",scope:"keyword.operator.error-control.php",settings:{foreground:"#c678dd"}},{name:"php instanceof",scope:"keyword.operator.type.php",settings:{foreground:"#c678dd"}},{name:"style double quoted array index normal begin",scope:"punctuation.section.array.begin.php",settings:{foreground:"#abb2bf"}},{name:"style double quoted array index normal end",scope:"punctuation.section.array.end.php",settings:{foreground:"#abb2bf"}},{name:"php illegal.non-null-typehinted",scope:"invalid.illegal.non-null-typehinted.php",settings:{foreground:"#f44747"}},{name:"php types",scope:"storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php",settings:{foreground:"#e5c07b"}},{name:"php call-function",scope:"meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php",settings:{foreground:"#61afef"}},{name:"php function-resets",scope:"punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php",settings:{foreground:"#abb2bf"}},{name:"support php constants",scope:"support.constant.core.rust",settings:{foreground:"#d19a66"}},{name:"support php constants",scope:"support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php",settings:{foreground:"#d19a66"}},{name:"php goto",scope:"entity.name.goto-label.php,support.other.php",settings:{foreground:"#61afef"}},{name:"php logical/bitwise operator",scope:"keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php",settings:{foreground:"#56b6c2"}},{name:"php regexp operator",scope:"keyword.operator.regexp.php",settings:{foreground:"#c678dd"}},{name:"php comparison",scope:"keyword.operator.comparison.php",settings:{foreground:"#56b6c2"}},{name:"php heredoc/nowdoc",scope:"keyword.operator.heredoc.php,keyword.operator.nowdoc.php",settings:{foreground:"#c678dd"}},{name:"python function decorator @",scope:"meta.function.decorator.python",settings:{foreground:"#61afef"}},{name:"python function support",scope:"support.token.decorator.python,meta.function.decorator.identifier.python",settings:{foreground:"#56b6c2"}},{name:"parameter function js/ts",scope:"function.parameter",settings:{foreground:"#abb2bf"}},{name:"brace function",scope:"function.brace",settings:{foreground:"#abb2bf"}},{name:"parameter function ruby cs",scope:"function.parameter.ruby, function.parameter.cs",settings:{foreground:"#abb2bf"}},{name:"constant.language.symbol.ruby",scope:"constant.language.symbol.ruby",settings:{foreground:"#56b6c2"}},{name:"rgb-value",scope:"rgb-value",settings:{foreground:"#56b6c2"}},{name:"rgb value",scope:"inline-color-decoration rgb-value",settings:{foreground:"#d19a66"}},{name:"rgb value less",scope:"less rgb-value",settings:{foreground:"#d19a66"}},{name:"sass selector",scope:"selector.sass",settings:{foreground:"#e06c75"}},{name:"ts primitive/builtin types",scope:"support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx",settings:{foreground:"#e5c07b"}},{name:"block scope",scope:"block.scope.end,block.scope.begin",settings:{foreground:"#abb2bf"}},{name:"cs storage type",scope:"storage.type.cs",settings:{foreground:"#e5c07b"}},{name:"cs local variable",scope:"entity.name.variable.local.cs",settings:{foreground:"#e06c75"}},{scope:"token.info-token",settings:{foreground:"#61afef"}},{scope:"token.warn-token",settings:{foreground:"#d19a66"}},{scope:"token.error-token",settings:{foreground:"#f44747"}},{scope:"token.debug-token",settings:{foreground:"#c678dd"}},{name:"String interpolation",scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","punctuation.section.embedded"],settings:{foreground:"#c678dd"}},{name:"Reset JavaScript string interpolation expression",scope:["meta.template.expression"],settings:{foreground:"#abb2bf"}},{name:"Import module JS",scope:["keyword.operator.module"],settings:{foreground:"#c678dd"}},{name:"js Flowtype",scope:["support.type.type.flowtype"],settings:{foreground:"#61afef"}},{name:"js Flow",scope:["support.type.primitive"],settings:{foreground:"#e5c07b"}},{name:"js class prop",scope:["meta.property.object"],settings:{foreground:"#e06c75"}},{name:"js func parameter",scope:["variable.parameter.function.js"],settings:{foreground:"#e06c75"}},{name:"js template literals begin",scope:["keyword.other.template.begin"],settings:{foreground:"#98c379"}},{name:"js template literals end",scope:["keyword.other.template.end"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces begin",scope:["keyword.other.substitution.begin"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces end",scope:["keyword.other.substitution.end"],settings:{foreground:"#98c379"}},{name:"js operator.assignment",scope:["keyword.operator.assignment"],settings:{foreground:"#56b6c2"}},{name:"go operator",scope:["keyword.operator.assignment.go"],settings:{foreground:"#e5c07b"}},{name:"go operator",scope:["keyword.operator.arithmetic.go","keyword.operator.address.go"],settings:{foreground:"#c678dd"}},{name:"Go package name",scope:["entity.name.package.go"],settings:{foreground:"#e5c07b"}},{name:"elm prelude",scope:["support.type.prelude.elm"],settings:{foreground:"#56b6c2"}},{name:"elm constant",scope:["support.constant.elm"],settings:{foreground:"#d19a66"}},{name:"template literal",scope:["punctuation.quasi.element"],settings:{foreground:"#c678dd"}},{name:"html/pug (jade) escaped characters and entities",scope:["constant.character.entity"],settings:{foreground:"#e06c75"}},{name:"styling css pseudo-elements/classes to be able to differentiate from classes which are the same colour",scope:["entity.other.attribute-name.pseudo-element","entity.other.attribute-name.pseudo-class"],settings:{foreground:"#56b6c2"}},{name:"Clojure globals",scope:["entity.global.clojure"],settings:{foreground:"#e5c07b"}},{name:"Clojure symbols",scope:["meta.symbol.clojure"],settings:{foreground:"#e06c75"}},{name:"Clojure constants",scope:["constant.keyword.clojure"],settings:{foreground:"#56b6c2"}},{name:"CoffeeScript Function Argument",scope:["meta.arguments.coffee","variable.parameter.function.coffee"],settings:{foreground:"#e06c75"}},{name:"Ini Default Text",scope:["source.ini"],settings:{foreground:"#98c379"}},{name:"Makefile prerequisities",scope:["meta.scope.prerequisites.makefile"],settings:{foreground:"#e06c75"}},{name:"Makefile text colour",scope:["source.makefile"],settings:{foreground:"#e5c07b"}},{name:"Groovy import names",scope:["storage.modifier.import.groovy"],settings:{foreground:"#e5c07b"}},{name:"Groovy Methods",scope:["meta.method.groovy"],settings:{foreground:"#61afef"}},{name:"Groovy Variables",scope:["meta.definition.variable.name.groovy"],settings:{foreground:"#e06c75"}},{name:"Groovy Inheritance",scope:["meta.definition.class.inherited.classes.groovy"],settings:{foreground:"#98c379"}},{name:"HLSL Semantic",scope:["support.variable.semantic.hlsl"],settings:{foreground:"#e5c07b"}},{name:"HLSL Types",scope:["support.type.texture.hlsl","support.type.sampler.hlsl","support.type.object.hlsl","support.type.object.rw.hlsl","support.type.fx.hlsl","support.type.object.hlsl"],settings:{foreground:"#c678dd"}},{name:"SQL Variables",scope:["text.variable","text.bracketed"],settings:{foreground:"#e06c75"}},{name:"types",scope:["support.type.swift","support.type.vb.asp"],settings:{foreground:"#e5c07b"}},{name:"heading 1, keyword",scope:["entity.name.function.xi"],settings:{foreground:"#e5c07b"}},{name:"heading 2, callable",scope:["entity.name.class.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 3, property",scope:["constant.character.character-class.regexp.xi"],settings:{foreground:"#e06c75"}},{name:"heading 4, type, class, interface",scope:["constant.regexp.xi"],settings:{foreground:"#c678dd"}},{name:"heading 5, enums, preprocessor, constant, decorator",scope:["keyword.control.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 6, number",scope:["invalid.xi"],settings:{foreground:"#abb2bf"}},{name:"string",scope:["beginning.punctuation.definition.quote.markdown.xi"],settings:{foreground:"#98c379"}},{name:"comments",scope:["beginning.punctuation.definition.list.markdown.xi"],settings:{foreground:"#7f848e"}},{name:"link",scope:["constant.character.xi"],settings:{foreground:"#61afef"}},{name:"accent",scope:["accent.xi"],settings:{foreground:"#61afef"}},{name:"wikiword",scope:["wikiword.xi"],settings:{foreground:"#d19a66"}},{name:"language operators like '+', '-' etc",scope:["constant.other.color.rgb-value.xi"],settings:{foreground:"#ffffff"}},{name:"elements to dim",scope:["punctuation.definition.tag.xi"],settings:{foreground:"#5c6370"}},{name:"C++/C#",scope:["entity.name.label.cs","entity.name.scope-resolution.function.call","entity.name.scope-resolution.function.definition"],settings:{foreground:"#e5c07b"}},{name:"Markdown underscore-style headers",scope:["entity.name.label.cs","markup.heading.setext.1.markdown","markup.heading.setext.2.markdown"],settings:{foreground:"#e06c75"}},{name:"meta.brace.square",scope:[" meta.brace.square"],settings:{foreground:"#abb2bf"}},{name:"Comments",scope:"comment, punctuation.definition.comment",settings:{fontStyle:"italic",foreground:"#7f848e"}},{name:"[VSCODE-CUSTOM] Markdown Quote",scope:"markup.quote.markdown",settings:{foreground:"#5c6370"}},{name:"punctuation.definition.block.sequence.item.yaml",scope:"punctuation.definition.block.sequence.item.yaml",settings:{foreground:"#abb2bf"}},{scope:["constant.language.symbol.elixir","constant.language.symbol.double-quoted.elixir"],settings:{foreground:"#56b6c2"}},{scope:["entity.name.variable.parameter.cs"],settings:{foreground:"#e5c07b"}},{scope:["entity.name.variable.field.cs"],settings:{foreground:"#e06c75"}},{name:"Deleted",scope:"markup.deleted",settings:{foreground:"#e06c75"}}

1,{name:"Inserted",scope:"markup.inserted",settings:{foreground:"#98c379"}},{name:"Underline",scope:"markup.underline",settings:{fontStyle:"underline"}},{name:"punctuation.section.embedded.begin.php",scope:["punctuation.section.embedded.begin.php","punctuation.section.embedded.end.php"],settings:{foreground:"#BE5046"}},{name:"support.other.namespace.php",scope:["support.other.namespace.php"],settings:{foreground:"#abb2bf"}},{name:"variable.other.object",scope:["variable.other.object"],settings:{foreground:"#e5c07b"}},{name:"variable.other.constant.property",scope:["variable.other.constant.property"],settings:{foreground:"#e06c75"}},{name:"entity.other.inherited-class",scope:["entity.other.inherited-class"],settings:{foreground:"#e5c07b"}},{name:"c variable readwrite",scope:"variable.other.readwrite.c",settings:{foreground:"#e06c75"}},{name:"php scope",scope:"entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php",settings:{foreground:"#abb2bf"}},{name:"Assembly",scope:["constant.numeric.decimal.asm.x86_64"],settings:{foreground:"#c678dd"}},{scope:["support.other.parenthesis.regexp"],settings:{foreground:"#d19a66"}},{scope:["constant.character.escape"],settings:{foreground:"#e5c07b"}},{scope:["string.regexp"],settings:{foreground:"#e06c75"}},{name:"js/ts italic",scope:"entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",settings:{fontStyle:"italic"}},{name:"comment",scope:"comment.line.double-slash,comment.block.documentation",settings:{fontStyle:"italic"}},{name:"Python Keyword Control",scope:"keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python",settings:{fontStyle:"italic"}},{name:"markup.italic.markdown",scope:"markup.italic.markdown",settings:{fontStyle:"italic"}}],colors:{"activityBar.background":"#282c34","activityBar.foreground":"#d7dae0","activityBarBadge.background":"#4d78cc","activityBarBadge.foreground":"#f8fafd","badge.background":"#282c34","button.background":"#404754","button.secondaryBackground":"#30333d","button.secondaryForeground":"#c0bdbd","checkbox.border":"#404754","debugToolBar.background":"#21252b",descriptionForeground:"#abb2bf","diffEditor.insertedTextBackground":"#00809b33","dropdown.background":"#21252b","dropdown.border":"#21252b","editor.background":"#282c34","editor.findMatchBackground":"#42557b","editor.findMatchBorder":"#457dff","editor.findMatchHighlightBackgroun

1d":"#6199ff2f","editor.foreground":"#abb2bf","editorHoverWidget.highlightForeground":"#61afef","editorInlayHint.foreground":"#abb2bf","editorInlayHint.background":"#2c313c","editor.lineHighlightBackground":"#2c313c","editorLineNumber.activeForeground":"#abb2bf","editorGutter.addedBackground":"#109868","editorGutter.deletedBackground":"#9A353D","editorGutter.modifiedBackground":"#948B60","editorOverviewRuler.addedBackground":"#109868","editorOverviewRuler.deletedBackground":"#9A353D","editorOverviewRuler.modifiedBackground":"#948B60","editor.selectionBackground":"#67769660","editor.selectionHighlightBackground":"#ffffff10","editor.selectionHighlightBorder":"#dddddd","editor.wordHighlightBackground":"#d2e0ff2f","editor.wordHighlightBorder":"#7f848e","editor.wordHighlightStrongBackground":"#abb2bf26","editor.wordHighlightStrongBorder":"#7f848e","editorActiveLineNumber.foreground":"#737984","editorBracketMatch.background":"#515a6b","editorBracketMatch.border":"#515a6b","editorCursor.background":"#ffffffc9","editorCursor.foreground":"#528bff","editorError.foreground":"#c24038","editorGroup.background":"#181a1f","editorGroup.border":"#181a1f","editorGroupHeader.tabsBackground":"#21252b","editorHoverWidget.background":"#21252b","editorHoverWidget.border":"#181a1f","editorIndentGuide.activeBackground":"#c8c8c859","editorIndentGuide.background":"#3b4048","editorLineNumber.foreground":"#495162","editorMarkerNavigation.background":"#21252b","editorRuler.foreground":"#abb2bf26","editorSuggestWidget.background":"#21252b","editorSuggestWidget.border":"#181a1f","editorSuggestWidget.selectedBackground":"#2c313a","editorWarning.foreground":"#d19a66","editorWhitespace.foreground":"#3b4048","editorWidget.background":"#21252b",focusBorder:"#3e4452","gitDecoration.ignoredResourceForeground":"#636b78","input.background":"#1d1f23","list.activeSelectionBackground":"#2c313a","list.activeSelectionForeground":"#d7dae0","list.focusBackground":"#323842","list.focusForeground":"#f0f0f0","list.highlightForeground":"#c5c5c5","list.hoverBackground":"#2c313a","list.hoverForeground":"#fff","list.inactiveSelectionBackground":"#323842","list.inactiveSelectionForeground":"#d7dae0","list.warningForeground":"#d19a66","menu.foreground":"#abb2bf","menu.separatorBackground":"#343a45","minimapGutter.addedBackground":"#109868","minimapGutter.deletedBackground":"#9A353D","minimapGutter.modifiedBackground":"#948B60","panel.border":"#3e4452","panelSectionHeader.background":"#21252b","peekViewEditor.background":"#1b1d23","peekViewEditor.matchHighlightBackgroun

1d":"#29244b","peekViewResult.background":"#22262b","scrollbar.shadow":"#23252c","scrollbarSlider.activeBackground":"#747d9180","scrollbarSlider.background":"#4e566660","scrollbarSlider.hoverBackground":"#5a637580","settings.focusedRowBackground":"#282c34","settings.headerForeground":"#fff","sideBar.background":"#21252b","sideBar.foreground":"#abb2bf","sideBarSectionHeader.background":"#282c34","sideBarSectionHeader.foreground":"#abb2bf","statusBar.background":"#21252b","statusBar.debuggingBackground":"#cc6633","statusBar.debuggingBorder":"#66017a","statusBar.debuggingForeground":"#ffffff","statusBar.foreground":"#9da5b4","statusBar.noFolderBackground":"#21252b","statusBarItem.hoverBackground":"#2c313a","statusBarItem.remoteBackground":"#4d78cc","statusBarItem.remoteForeground":"#f8fafd","tab.activeBackground":"#282c34","tab.activeForeground":"#dcdcdc","tab.border":"#181a1f","tab.hoverBackground":"#323842","tab.inactiveBackground":"#21252b","tab.unfocusedHoverBackground":"#323842","terminal.ansiBlack":"#3f4451","terminal.ansiBlue":"#4aa5f0","terminal.ansiBrightBlack":"#4f5666","terminal.ansiBrightBlue":"#4dc4ff","terminal.ansiBrightCyan":"#4cd1e0","terminal.ansiBrightGreen":"#a5e075","terminal.ansiBrightMagenta":"#de73ff","terminal.ansiBrightRed":"#ff616e","terminal.ansiBrightWhite":"#d7dae0","terminal.ansiBrightYellow":"#f0a45d","terminal.ansiCyan":"#42b3c2","terminal.ansiGreen":"#8cc265","terminal.ansiMagenta":"#c162de","terminal.ansiRed":"#e05561","terminal.ansiWhite":"#e6e6e6","terminal.ansiYellow":"#d18f52","terminal.background":"#282c34","terminal.border":"#3e4452","terminal.foreground":"#abb2bf","terminal.selectionBackground":"#abb2bf30","textBlockQuote.background":"#2e3440","textBlockQuote.border":"#4b5362","textLink.foreground":"#61afef","textPreformat.foreground":"#d19a66","titleBar.activeBackground":"#282c34","titleBar.activeForeground":"#9da5b4","titleBar.inactiveBackground":"#21252b","titleBar.inactiveForeground":"#6b717d","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonHoverBackground":"#404754"}},autoImport:!0,skipLanguages:[],filepath:"/home/runner/work/dmitripavlutin.com/dmitripavlutin.com/posts/037-react-memo/index.md"};function l(e){const o=Object.assign({p:"p",code:"code",h2:"h2",a:"a",span:"span",em:"em",h3:"h3",blockquote:"blockquote",ol:"ol",li:"li"},(0,r.ah)(),e.components),{Affiliate:t}=o;return t||i("Affiliate",!0),c||i("CH",!1),c.Code||i("CH.Code",!0),n.createElement(n.Fragment,null,n.createElement(o.p,null,"Users enjoy fast and responsive user interfaces (UI). A UI response delay of fewer than 100 milliseconds feels instant to the user. But a delay between 100 and 300 milliseconds is already perceptible."),"\n",n.createElement(o.p,null,"To improve user interface performance, React offers a higher-order component ",n.createElement(o.code,null,"React.memo()"),". When ",n.createElement(o.code,null,"React.memo()")," wraps a component, React memoizes the rendered output of the wrapped component and then skips unnecessary renderings."),"\n",n.createElement(o.p,null,"This post describes the situations where ",n.createElement(o.code,null,"React.memo()")," improves the performance, and, not less importantly, warns when its usage is useless."),"\n",n.createElement(o.p,null,"In addition, I'll describe some useful memoization tips you should be aware of."),"\n",n.createElement(t),"\n",n.createElement(o.h2,{id:"1-reactmemo",style:{position:"relative"}},n.createElement(o.a,{href:"#1-reactmemo","aria-label":"1 reactmemo permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. React.memo()"),"\n",n.createElement(o.p,null,"When deciding to update DOM, React first renders your component, then compares the result with the previous render. If the render results are different, React updates the DOM."),"\n",n.createElement(o.p,null,"The current vs the previous render results comparison is fast. But you can ",n.createElement(o.em,null,"speed up")," the process under some circumstances."),"\n",n.createElement(o.p,null,"When a component is wrapped in ",n.createElement(o.code,null,"React.memo()"),", React renders the component and memoizes the result. Before the next render, if the new props are the same, React reuses the memoized result, ",n.createElement(o.em,null,"skipping the next rendering"),"."),"\n",n.createElement(o.p,null,"Let's see the memoization in action. The functional component ",n.createElement(o.code,null,"Movie")," is wrapped in ",n.createElement(o.code,null,"React.memo()"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export function ",props:{style:{color:"#C678DD"}}},{content:"Movie",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"releaseDate",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">Movie title: ",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"title",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"</",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">Release date: ",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"releaseDate",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"</",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"export const ",props:{style:{color:"#C678DD"}}},{content:"MemoizedMovie ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"React",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"memo",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"Movie",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"React.memo(Movie)")," returns a new memoized component ",n.createElement(o.code,null,"MemoizedMovie"),"."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"MemoizedMovie")," outputs the same content as the original ",n.createElement(o.code,null,"Movie")," component, but with one difference — ",n.createElement(o.code,null,"MemoizedMovie")," render is memoized. React reuses the memoized content as long as ",n.createElement(o.code,null,"title")," and ",n.createElement(o.code,null,"releaseDate")," props are the same between renderings:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"3:4,9:10",focus:"",code:{lines:[{tokens:[{content:"// First render - MemoizedMovie IS INVOKED.",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"MemoizedMovie ",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"  title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"Heat" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"  releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"December 15, 1995" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"/>",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// Second render - MemoizedMovie IS NOT INVOKED.",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"MemoizedMovie",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"  title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"Heat" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"  releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"December 15, 1995" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"/>",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[{focus:"3:4,9:10",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.a,{href:"https://codesandbox.io/s/react-memo-demo-c9dx1",target:"_blank",rel:"noopener noreferrer"},"Open the demo.")),"\n",n.createElement(o.p,null,n.createElement(o.a,{href:"https://codesandbox.io/s/react-memo-demo-c9dx1",target:"_blank",rel:"noopener noreferrer"},"Open the demo"),", then expand the console. You will see that React renders ",n.createElement(o.code,null,"<MemoizedMovie>")," (memoized) just once, while ",n.createElement(o.code,null,"<Movie>")," (non-memoized) re-renders every time."),"\n",n.createElement(o.p,null,"You gain a ",n.createElement(o.em,null,"performance boost"),": by reusing the memoized content, React skips rendering the component and doesn't perform a virtual DOM difference check."),"\n",n.createElement(o.p,null,"The same functionality for class components is implemented by ",n.createElement(o.a,{href:"https://reactjs.org/docs/react-api.html#reactpurecomponent",target:"_blank",rel:"noopener noreferrer"},"PureComponent"),"."),"\n",n.createElement(o.h3,{id:"11-custom-equality-check-of-props",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#11-custom-equality-check-of-props","aria-label":"11 custom equality check of props permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1.1 Custom equality check of props"),"\n",n.createElement(o.p,null,"By default ",n.createElement(o.code,null,"React.memo()")," does a ",n.createElement(o.a,{href:"https://github.com/facebook/react/blob/v16.8.6/packages/shared/shallowEqual.js",target:"_blank",rel:"noopener noreferrer"},"shallow")," comparison of props and objects of props."),"\n",n.createElement(o.p,null,"To customize the props comparison, you can use the second argument to indicate an equality check function:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"React",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"memo",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"Component",props:{style:{color:"#E06C75"}}},{content:", [",props:{style:{color:"#ABB2BF"}}},{content:"areEqual",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"prevProps",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"nextProps",props:{style:{color:"#E06C75"}}},{content:")]);",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"areEqual(prevProps, nextProps)")," function must return ",n.createElement(o.code,null,"true")," if ",n.createElement(o.code,null,"prevProps")," and ",n.createElement(o.code,null,"nextProps")," are equal."),"\n",n.createElement(o.p,null,"For example, let's manually calculate if ",n.createElement(o.code,null,"Movie")," component props are equal:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"moviePropsAreEqual",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"prevMovie",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"nextMovie",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return ",props:{style:{color:"#C678DD"}}},{content:"prevMovie",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"title ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"nextMovie",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75"}}}]},{tokens:[{content:"    && ",props:{style:{color:"#56B6C2"}}},{content:"prevMovie",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"releaseDate ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"nextMovie",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"releaseDate",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"MemoizedMovie2 ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"React",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"memo",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"Movie",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"moviePropsAreEqual",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"moviePropsAreEqual()")," function returns ",n.createElement(o.code,null,"true")," if prev and next props are equal."),"\n",n.createElement(o.h2,{id:"2-when-to-use-reactmemo",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#2-when-to-use-reactmemo","aria-label":"2 when to use reactmemo permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. When to use React.memo()"),"\n",n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/c07d2ce4ede6301197b9605a75ae9b4e/9d361/when-to-use-react-memo-infographic.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 146.42857142857142%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAdABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAYBAgME/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAHzqDNzm1MOO8+KNOD/xAAdEAABBAIDAAAAAAAAAAAAAAAAAQIDExASIjFB/9oACAEBAAEFAkbxRrjRx7he8XSF0hdKf//EABYRAQEBAAAAAAAAAAAAAAAAAAAREv/aAAgBAwEBPwGMq0//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwFUR//EAB0QAAICAgMBAAAAAAAAAAAAAAABAjIQkREhI0H/2gAIAQEABj8CfnLkq9FZaPuV3m8i7Ls//8QAHBAAAgIDAQEAAAAAAAAAAAAAAAERUSEx8XHB/9oACAEBAAE/IWxOm4EV9p3hNBHpmxlu71BixHeO+ds//9oADAMBAAIAAwAAABDAygD/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREQ/9oACAEDAQE/EFlJB//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAECAQE/EGB//8QAIRABAAIBAwQDAAAAAAAAAAAAAQARITFBYRBRcYGRwfD/2gAIAQEAAT8QEjNK1QfEBA1d2+o2Nfo4lMc6uaagXYeYUIGCasNzGmkLOv3iAowPMuOpdb//2Q==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="Inforgraphic explaining when to use React.memo()"\n        title=""\n        src="/static/c07d2ce4ede6301197b9605a75ae9b4e/9605b/when-to-use-react-memo-infographic.jpg"\n        srcset="/static/c07d2ce4ede6301197b9605a75ae9b4e/c496c/when-to-use-react-memo-infographic.jpg 140w,\n/static/c07d2ce4ede6301197b9605a75ae9b4e/cbbf7/when-to-use-react-memo-infographic.jpg 280w,\n/static/c07d2ce4ede6301197b9605a75ae9b4e/9605b/when-to-use-react-memo-infographic.jpg 560w,\n/static/c07d2ce4ede6301197b9605a75ae9b4e/9d361/when-to-use-react-memo-infographic.jpg 800w"\n        sizes="(max-width: 560px) 100v

1w, 560px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",n.createElement(o.h3,{id:"21-component-renders-often-with-the-same-props",style:{position:"relative"}},n.createElement(o.a,{href:"#21-component-renders-often-with-the-same-props","aria-label":"21 component renders often with the same props permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.1 Component renders often with the same props"),"\n",n.createElement(o.p,null,"The best case of wrapping a component in ",n.createElement(o.code,null,"React.memo()")," is when you expect the component to render often and usually with the same props."),"\n",n.createElement(o.p,null,"A common situation that makes a component render with the same props is being forced to render by a parent component."),"\n",n.createElement(o.p,null,"Let's reuse ",n.createElement(o.code,null,"Movie")," component defined above. A new parent component ",n.createElement(o.code,null,"MovieViewsRealtime")," displays the number of views of a movie, with real-time updates:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"4",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"MovieViewsRealtime",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"releaseDate",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"views",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"Movie ",props:{style:{color:"#E5C07B"}}},{content:"title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"title",props:{style:{color:"#E06C75"}}},{content:"} ",props:{style:{color:"#C678DD"}}},{content:"releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"releaseDate",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:" />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      Movie views: ",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"views",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[{focus:"4",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"The application regularly polls the server in the background (every second), updating ",n.createElement(o.code,null,"views")," property of ",n.createElement(o.code,null,"MovieViewsRealtime")," component."),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"3,10,17",focus:"",code:{lines:[{tokens:[{content:"// Initial render",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"MovieViewsRealtime ",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"  views",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:"} ",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"  title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"Forrest Gump" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"  releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"June 23, 1994" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"/>",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// After 1 second, views is 10",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"MovieViewsRealtime ",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"  views",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"10",props:{style:{color:"#D19A66"}}},{content:"} ",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"  title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"Forrest Gump" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"  releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"June 23, 1994" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"/>",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// After 2 seconds, views is 25",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"MovieViewsRealtime ",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"  views",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"25",props:{style:{color:"#D19A66"}}},{content:"} ",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"  title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"Forrest Gump" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"  releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"June 23, 1994" ',props:{style:{color:"#98C379"}}}]},{tokens:[{content:"/>",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// etc",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"jsx"},annotations:[{focus:"3,10,17",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.a,{href:"https://codesandbox.io/s/react-memo-no-memoization-06vp1y?file=/src/index.js:152-187",target:"_blank",rel:"noopener noreferrer"},"Open the demo.")),"\n",n.createElement(o.p,null,"Every time ",n.createElement(o.code,null,"views")," prop is updated with a new number, ",n.createElement(o.code,null,"MovieViewsRealtime")," renders. This triggers ",n.createElement(o.code,null,"Movie")," rendering too, even if ",n.createElement(o.code,null,"title")," and ",n.createElement(o.code,null,"releaseDate")," remain the same."),"\n",n.createElement(o.p,null,"This is the appropriate case for applying memoization to ",n.createElement(o.code,null,"Movie")," component."),"\n",n.createElement(o.p,null,"Let's use the memoized component ",n.createElement(o.code,null,"MemoizedMovie")," inside ",n.createElement(o.code,null,"MovieViewsRealtime")," to prevent useless re-renderings:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1}

1,files:[{name:"",mark:"4",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"MovieViewsRealtime",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"releaseDate",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"views",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"MemoizedMovie ",props:{style:{color:"#E5C07B"}}},{content:"title",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"title",props:{style:{color:"#E06C75"}}},{content:"} ",props:{style:{color:"#C678DD"}}},{content:"releaseDate",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"releaseDate",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:" />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      Movie views: ",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"views",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  )",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[{focus:"4",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.a,{href:"https://codesandbox.io/s/react-memo-memoization-uxhnuv?file=/src/index.js",target:"_blank",rel:"noopener noreferrer"},"Open the demo.")),"\n",n.createElement(o.p,null,"As long as ",n.createElement(o.code,null,"title")," and ",n.createElement(o.code,null,"releaseDate")," props remain the same, React skips rendering ",n.createElement(o.code,null,"MemoizedMovie"),". This improves the performance of ",n.createElement(o.code,null,"MovieViewsRealtime")," component."),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"The more often the component renders with the same props, the heavier and the more computationally expensive the output is, the more chances are that component needs to be wrapped in ",n.createElement(o.code,null,"React.memo()"),"."),"\n"),"\n",n.createElement(o.p,null,"Anyways, use ",n.createElement(o.a,{href:"https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler",target:"_blank",rel:"noopener noreferrer"},"profiling")," to measure the benefits of applying ",n.createElement(o.code,null,"React.memo()"),"."),"\n",n.createElement(o.h2,{id:"3-when-to-avoid-reactmemo",style:{position:"relative"}},n.createElement(o.a,{href:"#3-when-to-avoid-reactmemo","aria-label":"3 when to avoid reactmemo permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. When to avoid React.memo()"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"If the component ",n.createElement(o.em,null,"isn't heavy")," and usually ",n.createElement(o.em,null,"renders with different props"),", most likely you don't need ",n.createElement(o.code,null,"React.memo()"),"."),"\n"),"\n",n.createElement(o.p,null,"Use the following rule of thumb: don't use memoization if you can't quantify the performance gains."),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"Performance-related changes applied incorrectly can even harm performance. Use ",n.createElement(o.code,null,"React.memo()")," wisely."),"\n"),"\n",n.createElement(o.p,null,"Although possible, wrapping class-based components in ",n.createElement(o.code,null,"React.memo()")," is undesirable. Extend ",n.createElement(o.code,null,"PureComponent")," class or define a custom implementation of ",n.createElement(o.code,null,"shouldComponentUpdate()")," method if you need memoization for class-based components."),"\n",n.createElement(o.h3,{id:"31-u

1seless-props-comparison",style:{position:"relative"}},n.createElement(o.a,{href:"#31-useless-props-comparison","aria-label":"31 useless props comparison permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3.1 Useless props comparison"),"\n",n.createElement(o.p,null,"Imagine a component that usually renders with different props. In this case, memoization doesn't provide benefits."),"\n",n.createElement(o.p,null,"Even if you wrap such a volatile component in ",n.createElement(o.code,null,"React.memo()"),", React does 2 jobs on every rendering:"),"\n",n.createElement(o.ol,null,"\n",n.createElement(o.li,null,"Invokes the comparison function to determine whether the previous and next props are equal"),"\n",n.createElement(o.li,null,"Because props comparison almost always returns ",n.createElement(o.code,null,"false"),", React performs the diff of previous and current render results"),"\n"),"\n",n.createElement(o.p,null,"You gain no performance benefits, have more complex code (than the non-memoized version), and also run the comparison function."),"\n",n.createElement(o.h2,{id:"4-reactmemo-and-callback-functions",style:{position:"relative"}},n.createElement(o.a,{href:"#4-reactmemo-and-callback-functions","aria-label":"4 reactmemo and callback functions permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"4. React.memo() and callback functions"),"\n",n.createElement(o.p,null,"The function object equals only to itself. Let's see that by comparing some functions:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"8",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"sumFactory",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"a",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"b",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"a ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"b",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"sum1 ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"sumFactory",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"sum2 ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"sumFactory",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"sum1 ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"sum2",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => false",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"sum1 ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"sum1",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"sum2 ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"sum2",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"8",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.a,{href:"https://jsfiddle.net/dmitri_pavlutin/zhL6pf7t/",target:"_blank",rel:"noopener noreferrer"},"Open the demo.")),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"sumFactory()")," is a factory function. It returns functions that sum 2 numbers."),"\n",n.createElement(o.p,null,"The functions ",n.createElement(o.code,null,"sum1")," and ",n.createElement(o.code,null,"sum2")," are created by the factory. Both functions sum numbers. However, ",n.createElement(o.code,null,"sum1")," and ",n.createElement(o.code,null,"sum2")," are different function objects (",n.createElement(o.code,null,"sum1 === sum2")," is ",n.createElement(o.code,null,"false"),")."),"\n",n.createElement(o.p,null,"Every time a parent component defines a callback for its child, it creates new function instances. Let's see how this breaks memoization, and how to fix it."),"\n",n.createElement(o.p,null,"The following component ",n.createElement(o.code,null,"Logout")," accepts a callback prop ",n.createElement(o.code,null,"onLogout"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"Logout",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"username",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"onLogout",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div ",props:{style:{color:"#E06C75"}}},{content:"onClick",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"onLogout",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      Logout ",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"username",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"MemoizedLogout ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"React",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"memo",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"Logout",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",n.createElement(o.p,null,"A component that accepts a callback must be handled with care when applying memoization. The parent component could provide different instances of the callback function on every render:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"7",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"MyApp",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"store",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"cookies",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div ",props:{style:{color:"#E06C75"}}},{content:"className",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"main"',props:{style:{color:"#98C379"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"header",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"        <",props:{style:{color:"#ABB2BF"}}},{content:"MemoizedLogout",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"          username",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"store",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"username",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"          onLogout",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"() ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"cookies",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"clear",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'session'",props:{style:{color:"#98C379"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"        />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      </",props:{style:{color:"#ABB2BF"}}},{content:"header",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      {",props:{style:{color:"#C678DD"}}},{content:"store",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"content",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[{focus:"7",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Even if provided with the same ",n.createElement(o.code,null,"username")," value, ",n.createElement(o.code,null,"MemoizedLogout")," renders every time because it receives new instances of ",n.createElement(o.code,null,"onLogout")," callback."),"\n",n.createElement(o.p,null,"Memoization is broken."),"\n",n.createElement(o.p,null,"To fix memoization, ",n.createElement(o.code,null,"onLogout")," prop must receive the same callback instance. Let's apply ",n.createElement(o.a,{href:"https://reactjs.org/docs/hooks-reference.html#usecallback",target:"_blank",rel:"noopener noreferrer"},"useCallback()")," to preserve the callback instance between renderings:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"4:7,13",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"MemoizedLogout ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"React",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"memo",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"Logout",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"MyApp",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"store",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"cookies",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"onLogout ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useCallback",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    () ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"cookies",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"clear",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'session'",props:{style:{color:"#98C379"}}},{content:"), ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    [",props:{style:{color:"#ABB2BF"}}},{content:"cookies",props:{style:{color:"#E06C75"}}},{content:"]",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    <",props:{style:{color:"#ABB2BF"}}},{content:"div ",props:{style:{color:"#E06C75"}}},{content:"className",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"main"',props:{style:{color:"#98C379"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      <",props:{style:{color:"#ABB2BF"}}},{content:"header",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"        <",props:{style:{color:"#ABB2BF"}}},{content:"MemoizedLogout",props:{style:{color:"#E5C07B"}}}]},{tokens:[{content:"          username",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"store",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"username",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"          onLogout",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"onLogout",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"        />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      </",props:{style:{color:"#ABB2BF"}}},{content:"header",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      {",props:{style:{color:"#C678DD"}}},{content:"store",props:{style:{color

1:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"content",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:"    </",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[{focus:"4:7,13",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"useCallback(() => cookies.clear('session'), [cookies])")," always returns the same function instance as long as ",n.createElement(o.code,null,"cookies")," is the same. The memoization of ",n.createElement(o.code,null,"MemoizedLogout")," is fixed."),"\n",n.createElement(o.h2,{id:"5-reactmemo-is-a-performance-hint",style:{position:"relative"}},n.createElement(o.a,{href:"#5-reactmemo-is-a-performance-hint","aria-label":"5 reactmemo is a performance hint permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"5. React.memo() is a performance hint"),"\n",n.createElement(o.p,null,"Strictly, React uses memoization as a performance hint."),"\n",n.createElement(o.p,null,"Although React avoids rendering a memoized component in most situations, you shouldn't count on it to prevent rendering."),"\n",n.createElement(o.h2,{id:"6-reactmemo-and-hooks",style:{position:"relative"}},n.createElement(o.a,{href:"#6-reactmemo-and-hooks","aria-label":"6 reactmemo and hooks permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"6. React.memo() and hooks"),"\n",n.createElement(o.p,null,"Components that use hooks can be freely wrapped in ",n.createElement(o.code,null,"React.memo()")," to achieve memoization."),"\n",n.createElement(o.p,null,"React always re-renders the component when the state changes, even if the component is wrapped in ",n.createElement(o.code,null,"React.memo()"),"."),"\n",n.createElement(o.h2,{id:"7-conclusion",style:{position:"relative"}},n.createElement(o.a,{href:"#7-conclusion","aria-label":"7 conclusion permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"7. Conclusion"),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"React.memo()")," is a great tool to memoize functional components. When applied correctly, it prevents useless re-renderings when previous props equal to current props."),"\n",n.createElement(o.p,null,"Take precautions when memoizing components that use props as callbacks. Be sure to provide the same callback function instance between renderings."),"\n",n.createElement(o.p,null,"Don't forget to use ",n.createElement(o.a,{href:"https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-c

1hrome-performance-tab",target:"_blank",rel:"noopener noreferrer"},"profiling")," to measure the performance gains of memoization."),"\n",n.createElement(o.p,null,"What to read next? To memoize callbacks in React I recommend checking my post ",n.createElement(o.a,{href:"/react-usecallback/"},"Your Guide to React.useCallback()"),"."),"\n",n.createElement(o.p,null,n.createElement(o.em,null,"Do you know interesting use cases of React.memo()? If so, please write a comment below!")))}var p=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,r.ah)(),e.components);return o?n.createElement(o,e,n.createElement(l,e)):l(e)};function i(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var d=t(12),u=t(5319),m=t(5893);function g(e){let{data:o,children:t}=e;const{featured:{popularPostsByCategory:n}}=o.site.siteMetadata,{mdx:r,popularPostsMarkdown:s}=o,c={...r.frontmatter,children:t,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},a=r.internal.contentFilePath.split("/").slice(-3).join("/"),l=s.edges.map(u.sN),p=n.map((e=>{let{category:o,slugs:t}=e;return{category:o,plainPosts:t.map((e=>l.find((o=>{let{slug:t}=o;return e===t}))))}}));return(0,m.jsx)(d.Z,{postRelativePath:a,post:c,popularPostsByCategory:p})}function f(e){return n.createElement(g,e,n.createElement(p,e))}}}]);