1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[8279],{7161:function(e,o,t){t.r(o),t.d(o,{default:function(){return y}});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/070-react-state-mng/index.md"};function p(e){const o=Object.assign({p:"p",code:"code",ul:"ul",li:"li",h2:"h2",a:"a",span:"span",blockquote:"blockquote",em:"em"},(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,"State inside a React component is the encapsulated data that is persistent between renderings. ",n.createElement(o.code,null,"useState()")," is the React hook responsible for managing state inside a functional component."),"\n",n.createElement(o.p,null,"I like that ",n.createElement(o.code,null,"useState()")," indeed makes the work with state quite easy. But often I encounter questions like:"),"\n",n.createElement(o.ul,null,"\n",n.createElement(o.li,null,"should I divide my component's state into small states, or keep a compound one?"),"\n",n.createElement(o.li,null,"if the state management becomes complicated, should I extract it from the component? How to do that?"),"\n",n.createElement(o.li,null,"if ",n.createElement(o.code,null,"useState()")," usage is so simple, when would you need ",n.createElement(o.code,null,"useReducer()"),"?"),"\n"),"\n",n.createElement(o.p,null,"This post describes 3 easy rules that answer the above questions and help you design the component's state."),"\n",n.createElement(t),"\n",n.createElement(o.h2,{id:"1-one-concern",style:{position:"relative"}},n.createElement(o.a,{href:"#1-one-concern","aria-label":"1 one concern 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. One concern"),"\n",n.createElement(o.p,null,"The first good rule of efficient state management is:"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"Make a state variable responsible for one concern."),"\n"),"\n",n.createElement(o.p,null,"Having a state variable responsible for one concern makes it conform to the Single Responsibility Principle."),"\n",n.createElement(o.p,null,"Let's see an example of a compound state, i.e. a state that incorporates multiple state values."),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setState",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"({",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" on",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" count",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}}]},{tokens:[{content:"});",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"on ",props:{style:{color:"#E06C75"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"// => 0",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"The state consists of a plain JavaScript object, having the properties ",n.createElement(o.code,null,"on")," and ",n.createElement(o.code,null,"count"),"."),"\n",n.createElement(o.p,null,"The first property, ",n.createElement(o.code,null,"state.on"),", holds a boolean denoting a switch. The same way ",n.createElement(o.code,null,"state.count")," holds a number denoting a counter, for example, how many times the user had clicked a button."),"\n",n.createElement(o.p,null,"Then, let's say you'd like to increase the counter by 1:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// Updating compound state",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"setUser",props:{style:{color:"#61AFEF"}}},{content:"({",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" ...",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" count",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}}]},{tokens:[{content:"});",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"You have to keep nearby the whole state to be able to update just ",n.createElement(o.code,null,"count"),". This is a big construction to invoke to simply increase a counter: all because the state variable is responsible for 2 concerns: switch and counter."),"\n",n.createElement(o.p,null,"The solution is to split the compound state into 2 atomic states ",n.createElement(o.code,null,"on")," and ",n.createElement(o.code,null,"count"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"on",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setOnOff",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"count",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setCount",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"on")," state variable is solely responsible for storing the switch state. The same way ",n.createElement(o.code,null,"count")," variable is solely responsible for a counter."),"\n",n.createElement(o.p,null,"Now let's try to update the counter:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"setCount",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// or using a callback",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"setCount",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"count ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"count")," state, which is responsible for counting only, is easy to reason about, and respectively easy to update and read."),"\n",n.createElement(o.p,null,"Don't worry about calling multiple ",n.createElement(o.code,null,"useState()")," to create state variables for each concern."),"\n",n.createElement(o.p,null,"Note, however, that if you have way too much ",n.createElement(o.code,null,"useState()")," variables, there's a good chance that your component violates the Single Responsibility Principle. Just split such components into smaller ones."),"\n",n.createElement(o.h2,{id:"2-extract-complex-state-logic",style:{position:"relative"}}
1,n.createElement(o.a,{href:"#2-extract-complex-state-logic","aria-label":"2 extract complex state logic 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. Extract complex state logic"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"Extract complex state logic into a custom hook."),"\n"),"\n",n.createElement(o.p,null,"Would it make sense to keep complex state operations within the component?"),"\n",n.createElement(o.p,null,"The answer is in fundamentals (as usually happens)."),"\n",n.createElement(o.p,null,"React hooks are created to isolate the component from ",n.createElement(o.em,null,"complex state management")," and side effects. So, since the component should be concerned only about the elements to render and some event listeners to attach, the complex state logic should be extracted into a custom hook."),"\n",n.createElement(o.p,null,"Let's consider a component that manages a list of products. The user can add new product names. The constraint is that product names have to be ",n.createElement(o.em,null,"unique"),"."),"\n",n.createElement(o.p,null,"The first attempt is to keep the setter of product names list state directly inside the component:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"2,8:11",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"ProductsList",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setNames",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"([]);",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"newName",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setNewName",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"''",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"map ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"name ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"name",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"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleChange ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"event ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"setNewName",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"event",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"target",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"value",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleAdd ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"s ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Set",props:{style:{color:"#61AFEF"}}},{content:"([...",props:{style:{color:"#ABB2BF"}}},{content:"names",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"newName",props:{style:{color:"#E06C75"}}},{content:"]);",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" setNames",props:{style:{color:"#61AFEF"}}},{content:"([...",props:{style:{color:"#ABB2BF"}}},{content:"s",props:{style:{color:"#E06C75"}}},{content:"]);",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:'"products"',props:{style:{color:"#98C379"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" {",props:{style:{color:"#C678DD"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#E06C75"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"input ",props:{style:{color:"#E06C75"}}},{content:"type",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"text" ',props:{style:{color:"#98C379"}}},{content:"onChange",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleChange",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:" />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"button ",props:{style:{color:"#E06C75"}}},{content:"onClick",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleAdd",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">Add</",props:{style:{color:"#ABB2BF"}}},{content:"button",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"}}}]}],lang:"jsx"},annotations:[{focus:"2,8:11",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"names")," state variable holds the product names. When the ",n.createElement(o.em,null,"Add")," button is clicked, ",n.createElement(o.code,null,"handleAdd()")," event handler is invoked."),"\n",n.createElement(o.p,null,"Inside ",n.createElement(o.code,null,"handleAdd()"),", a ",n.createElement(o.code,null,"Set")," object is used to keep the product names unique. Should the component be concerned about this implementation detail? Nope."),"\n",n.createElement(o.p,null,"It would be better to isolate the complex state setter logic into a custom hook. Let's do that."),"\n",n.createElement(o.p,null,"The new custom hook ",n.createElement(o.code,null,"useUnique()")," takes care of keeping the items unique:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// useUnique.js",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"export function ",props:{style:{color:"#C678DD"}}},{content:"useUnique",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"initial",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setItems",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"initial",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"add ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"newItem ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"uniqueItems ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [...",props:{style:{color:"#ABB2BF"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Set",props:{style:{color:"#61AFEF"}}},{content:"([...",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"newItem",props:{style:{color:"#E06C75"}}},{content:"])];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" setItems",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"uniqueItems",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"}}},{content:"items",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"add",props:{style:{color:"#E06C75"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Having the custom state management extracted into a hook, the ",n.createElement(o.code,null,"ProductsList"),"
1component becomes much lighter:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"4,10",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"useUnique",props:{style:{color:"#E06C75"}}},{content:" } ",props:{style:{color:"#ABB2BF"}}},{content:"from ",props:{style:{color:"#C678DD"}}},{content:"'./useUnique'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"ProductsList",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"add",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useUnique",props:{style:{color:"#61AFEF"}}},{content:"([]);",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"newName",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setNewName",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"''",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"map ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"name ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"div",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"name",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"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleChange ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"event ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"setNewName",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"e",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"target",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"value",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleAdd ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"add",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"newName",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:'"products"',props:{style:{color:"#98C379"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" {",props:{style:{color:"#C678DD"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#E06C75"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"input ",props:{style:{color:"#E06C75"}}},{content:"type",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"text" ',props:{style:{color:"#98C379"}}},{content:"onChange",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleChange",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:" />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"button ",props:{style:{color:"#E06C75"}}},{content:"onClick",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleAdd",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">Add</",props:{style:{color:"#ABB2BF"}}},{content:"button",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"}}}]}],lang:"jsx"},annotations:[{focus:"4,10",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"const [names, addName] = useUnique([])")," is what enables the custom hook. The component is no longer cluttered with complex state management."),"\n",n.createElement(o.p,null,"If you'd like to add a new name to the list, you only have to invoke ",n.createElement(o.code,null,"add('New Product Name')"),"."),"\n",n.createElement(o.p,null,"Bottom line, the benefits of extracting the complex state management into a custom hook are:"),"\n",n.createElement(o.ul,null,"\n",n.createElement(o.li,null,"The component becomes free of state management details"),"\n",n.createElement(o.li,null,"The custom hook can be reused"),"\n",n.createElement(o.li,null,"The custom hook can be easily tested in isolation"),"\n"),"\n",n.createElement(o.h2,{id:"3-extract-multiple-state-operations",style:{position:"relative"}}
1,n.createElement(o.a,{href:"#3-extract-multiple-state-operations","aria-label":"3 extract multiple state operations 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. Extract multiple state operations"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"Extract multiple state operations into a reducer."),"\n"),"\n",n.createElement(o.p,null,"Continuing the example with ",n.createElement(o.code,null,"ProductsList"),", let's introduce a Delete operation, which deletes a product name from the list."),"\n",n.createElement(o.p,null,"Now you have to code 2 operations: adding and deleting products. The handle these operations, it makes sense to create a reducer and make the component free of state management logic."),"\n",n.createElement(o.p,null,"Again, this approach fits the idea of hooks: extract the complex state management out of the components."),"\n",n.createElement(o.p,null,"Here's a possible implementation of the reducer that adds and deletes products:"),"\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:"uniqueReducer",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"action",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" switch",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"action",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"type",props:{style:{color:"#E06C75"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'add'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" [...",props:{style:{color:"#ABB2BF"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Set",props:{style:{color:"#61AFEF"}}},{content:"([...",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"action",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75"}}},{content:"])];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'delete'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"filter",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"name ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"name ",props:{style:{color:"#E06C75"}}},{content:"!== ",props:{style:{color:"#56B6C2"}}},{content:"action",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" default",props:{style:{color:"#C678DD"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" throw new ",props:{style:{color:"#C678DD"}}},{content:"Error",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Then ",n.createElement(o.code,null,"uniqueReducer()")," can be used inside the products list by invoking React's ",n.createElement(o.code,null,"useReducer()")," hook:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"2,7,10",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"ProductsList",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"dispatch",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useReducer",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"uniqueReducer",props:{style:{color:"#E06C75"}}},{content:", []);",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"newName",props:{style:{color:"#E5C07B"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"setNewName",props:{style:{color:"#E5C07B"}}},{content:"] ",props:{style:{color:"#ABB2BF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useState",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"''",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleChange ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"event ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"setNewName",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"event",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"target",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"value",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"handleAdd ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"dispatch",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"type",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'add'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"newName",props:{style:{color:"#E06C75"}}},{content:" });",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"map ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"name ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"delete ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"dispatch",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"type",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'delete'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75"}}},{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:"#C678DD"}}},{content:"name",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"button ",props:{style:{color:"#E06C75"}}},{content:"onClick",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{delete}",props:{style:{color:"#C678DD"}}},{content:">Delete</",props:{style:{color:"#ABB2BF"}}},{content:"button",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:" 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:'"products"',props:{style:{color:"#98C379"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" {",props:{style:{color:"#C678DD"}}},{content:"names",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#E06C75"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"input ",props:{style:{color:"#E06C75"}}},{content:"type",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:'"text" ',props:{style:{color:"#98C379"}}},{content:"onChange",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleChange",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:" />",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"button ",props:{style:{color:"#E06C75"}}},{content:"onClick",props:{style:{color:"#D19A66",fontStyle:"italic"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:"{",props:{style:{color:"#C678DD"}}},{content:"handleAdd",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">Add</",props:{style:{color:"#ABB2BF"}}},{content:"button",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"}}}]}],lang:"jsx"},annotations:[{focus:"2,7,10",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"const [names, dispatch] = useReducer(uniqueReducer, [])")," enables ",n.createElement(o.code,null,"uniqueReducer"),". ",n.createElement(o.code,null,"names")," is the state variable holding the product names, and ",n.createElement(o.code,null,"dispatch")," is a function to be called using an action object."),"\n",n.createElement(o.p,null,"When ",n.createElement(o.em,null,"Add")," button is clicked, the handler invokes ",n.createElement(o.code,null,"dispatch({ type: 'add', name: newName })"),". Dispatching an ",n.createElement(o.code,null,"add")," action makes the reducer ",n.createElement(o.code,null,"uniqueReducer")," add a new product name to the state."),"\n",n.createElement(o.p,null,"In the same way, when ",n.createElement(o.em,null,"Delete")," button is clicked, the handler invokes ",n.createElement(o.code,null,"dispatch({ type: 'delete', name })"),". Dispatching a ",n.createElement(o.code,null,"remove")," action removes the product name from the state of names."),"\n",n.createElement(o.p,null,"Interestingly, the reducer is a special case of ",n.createElement(o.a,{href:"https://refactoring.guru/design-patterns/command",target:"_blank",rel:"noopener noreferrer"},"Command design pattern"),"."),"\n",n.createElement(o.h2,{id:"4-conclusion",style:{position:"relative"}}
1,n.createElement(o.a,{href:"#4-conclusion","aria-label":"4 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>'}})),"4. Conclusion"),"\n",n.createElement(o.p,null,"A state variable should be responsible for one concern."),"\n",n.createElement(o.p,null,"If the state has a complicated update logic, extract this logic out of the component into a custom hook."),"\n",n.createElement(o.p,null,"Same way, if the state requires multiple operations, use a reducer to incorporate these operations."),"\n",n.createElement(o.p,null,"No matter what rule you use, the state should be as simple and decoupled as possible. The component should not be cluttered with the details of how the state is updated: these should be a part of a custom hook or a reducer."),"\n",n.createElement(o.p,null,"Conforming to these 3 rules will make your state logic easy to understand, maintain, and test."))}var l=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,r.ah)(),e.components);return o?n.createElement(o,e,n.createElement(p,e)):p(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("/"),p=s.edges.map(u.sN),l=n.map((e=>{let{category:o,slugs:t}=e;return{category:o,plainPosts:t.map((e=>p.find((o=>{let{slug:t}=o;return e===t}))))}}));return(0,m.jsx)(d.Z,{postRelativePath:a,post:c,popularPostsByCategory:l})}function y(e){return n.createElement(g,e,n.createElement(l,e))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.