1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[2360],{3558:function(e,t,o){o.r(t),o.d(t,{default:function(){return f}});var n=o(7294),r=o(1151),s=o(9794);const a={annotations:s.ds,Code:s.EK},c={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/149-react-usereducer/index.md"};function p(e){const t=Object.assign({p:"p",code:"code",h2:"h2",a:"a",span:"span",em:"em",h3:"h3",blockquote:"blockquote",img:"img"},(0,r.ah)(),e.components),{Affiliate:o,TableOfContents:s}=t;return o||l("Affiliate",!0),a||l("CH",!1),a.Code||l("CH.Code",!0),s||l("TableOfContents",!0),n.createElement(n.Fragment,null,n.createElement(t.p,null,"If you've used ",n.createElement(t.code,null,"useState()")," hook to manage a non-trivial state like a list of items, where you need to add, update and remove items in the state, you can notice that the state management logic takes a good part of the component's body."),"\n",n.createElement(t.p,null,"A React component should usually contain the logic that calculates the output. But the state management\nlogic is a different concern that should be managed in a separate place. Otherwise, you get a mix of state management and rendering logic in one place, and that's difficult to read, maintain, and test!"),"\n",n.createElement(t.p,null,"To help you separate the concerns (rendering and state management) React provides the hook ",n.createElement(t.code,null,"useReducer()"),". The hook does so by extracting the state management out of the component."),"\n",n.createElement(t.p,null,"Let's see how the ",n.createElement(t.code,null,"useReducer()")," hook works with accessible real-world examples."),"\n",n.createElement(o),"\n",n.createElement(s,{maxLevel:1}),"\n",n.createElement(t.h2,{id:"1-usereducer",style:{position:"relative"}},n.createElement(t.a,{href:"#1-usereducer","aria-label":"1 usereducer permalink",className:"anchor before"},n.createElement(t.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. useReducer()"),"\n",n.createElement(t.p,null,"The ",n.createElement(t.code,null,"useReducer(reducer, initialState)")," hook accepts 2 arguments: the ",n.createElement(t.em,null,"reducer")," function and the ",n.createElement(t.em,null,"initial state"),". The hook then returns an array of 2 items: the current state and the ",n.createElement(t.em,null,"dispatch")," function."),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"useReducer",props:{style:{color:"#E06C75"}}},{content:" } ",props:{style:{color:"#ABB2BF"}}},{content:"from ",props:{style:{color:"#C678DD"}}},{content:"'react'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"MyComponent",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"state",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:"reducer",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"initialState",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"action ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" type",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'ActionType'",props:{style:{color:"#98C379"}}}]},{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:"button ",props:{style:{color:"#E06C75"}}},{content:"onClick",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:"dispatch",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"action",props:{style:{color:"#E06C75"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" Click me",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"button",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" );",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Now, let's decipher what the terms of ",n.createElement(t.em,null,"initial state"),", ",n.createElement(t.em,null,"action object"),", ",n.createElement(t.em,null,"dispatch"),", and ",n.createElement(t.em,null,"reducer")," mean."),"\n",n.createElement(t.h3,{id:"a-initial-state",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#a-initial-state","aria-label":"a initial state permalink",className:"anchor before"},n.createElement(t.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>'}})),"A. Initial state"),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"The ",n.createElement(t.em,null,"initial state")," is the value the state is initialized with."),"\n"),"\n",n.createElement(t.p,null,"For example, in the case of a counter state, the initial value is:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// initial state",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"initialState ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" counter",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"0 ",props:{style:{color:"#D19A66"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.h3,{id:"b-action-object",style:{position:"relative"}},n.createElement(t.a,{href:"#b-action-object","aria-label":"b action object permalink",className:"anchor before"},n.createElement(t.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>'}})),"B. Action object"),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"An ",n.createElement(t.em,null,"action object")," is an object that describes how to update the state."),"\n"),"\n",n.createElement(t.p,null,"Typically, the action object has a property ",n.createElement(t.code,null,"type")," â a string describing what kind of state update the reducer must do."),"\n",n.createElement(t.p,null,"For example, an action object to increase the counter can look as follows:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"action ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" type",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'increase'",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"If the action object must carry some useful information (aka payload) to be used by the reducer, then you can add additional properties to the action object."),"\n",n.createElement(t.p,null,"For example, here's an action object meant to add a new user to the users state array:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"action ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" type",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'add'",props:{style:{color:"#98C379"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" user",props:{style:{color:"#E06C75"}}},{content:": { ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" name",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'John Smith'",props:{style:{color:"#98C379"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" email",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'[email protected]'",props:{style:{color:"#98C379"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"user")," is a property that holds the information about the user to add."),"\n",n.createElement(t.p,null,"The action object is interpreted by the reducer function (described below)."),"\n",n.createElement(t.h3,{id:"c-dispatch-function",style:{position:"relative"}},n.createElement(t.a,{href:"#c-dispatch-function","aria-label":"c dispatch function permalink",className:"anchor before"},n.createElement(t.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>'}})),"C. Dispatch function"),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"The ",n.createElement(t.em,null,"dispatch")," is a special function that dispatches an action object."),"\n"),"\n",n.createElement(t.p,null,"The dispatch function is created for you by the ",n.createElement(t.code,null,"useReducer()")," hook:"),"\n",n.createElement(a.Code,{codeConfig:c,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:"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:"reducer",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"initialState",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Whenever you want to update the state (usually from an event handler or after completing a fetch request), you simply call the dispatch function with the appropriate action object: ",n.createElement(t.code,null,"dispatch(actionObject)"),"."),"\n",n.createElement(t.p,null,"In simpler terms, dispatching means a request to update the state."),"\n",n.createElement(t.h3,{id:"d-reducer-function",style:{position:"relative"}},n.createElement(t.a,{href:"#d-reducer-function","aria-label":"d reducer function permalink",className:"anchor before"},n.createElement(t.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>'}})),"D. Reducer function"),"\n",n.createElement(t.blockquote,null,"\n",n.createElement(t.p,null,"The ",n.createElement(t.em,null,"reducer")," is a pure function that accepts 2 parameters: the ",n.createElement(t.em,null,"current state")," and an ",n.createElement(t.em,null,"action object"),". Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state."),"\n"),"\n",n.createElement(t.p,null,"The following reducer function supports the increase and decrease of a counter state:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"reducer",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:" let ",props:{style:{color:"#C678DD"}}},{content:"newState",props:{style:{color:"#E06C75"}}},{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:"'increase'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" newState ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"counter",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"counter ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" break",props:{style:{color:"#C678DD"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'decrease'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" newState ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"counter",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"counter ",props:{style:{color:"#E06C75"}}},{content:"- ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" break",props:{style:{color:"#C678DD"}}},{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:" return ",props:{style:{color:"#C678DD"}}},{content:"newState",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The reducer above doesn't modify directly the current state in the ",n.createElement(t.code,null,"state")," variable, but rather creates a new state object stored in ",n.createElement(t.code,null,"newState"),", then returns it."),"\n",n.createElement(t.p,null,"React checks the difference between the new and the current state to determine whether the state has been updated. So do not mutate the current state directly."),"\n",n.createElement(t.h3,{id:"e-wiring-everything",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#e-wiring-everything","aria-label":"e wiring everything permalink",className:"anchor before"},n.createElement(t.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>'}})),"E. Wiring everything"),"\n",n.createElement(t.p,null,"Wiring all these terms together, here's how the state update using a reducer works."),"\n",n.createElement(t.img,{src:"/bba1ab69aedaaeebc68ceafbb0d304c3/react-usereducer.svg",alt:"React useReducer()"}),"\n",n.createElement(t.p,null,"The ",n.createElement(t.em,null,"dispatch")," function with the ",n.createElement(t.em,null,"action object")," is called as a result of an event handler or completing a fetch request."),"\n",n.createElement(t.p,null,"Then React redirects the action object and the current state value to the ",n.createElement(t.em,null,"reducer")," function."),"\n",n.createElement(t.p,null,"The reducer function uses the action object and performs a state update, returning the new state."),"\n",n.createElement(t.p,null,"React then checks whether the new state differs from the previous one. If the state has been updated, React re-renders the component, and ",n.createElement(t.code,null,"useReducer()")," returns the new state value: ",n.createElement(t.code,null,"[newState, ...] = useReducer(...)"),"."),"\n",n.createElement(t.p,null,"Note that ",n.createElement(t.code,null,"useReducer()")," design is based on the ",n.createElement(t.a,{href:"https://www.freecodecamp.org/news/an-introduction-to-the-flux-architectural-pattern-674ea74775c9/",target:"_blank",rel:"noopener noreferrer"},"Flux architecture"),"."),"\n",n.createElement(t.p,null,"If all these terms sound too abstract, no worries! Let's see how ",n.createElement(t.code,null,"useReducer()")," works in an interesting example."),"\n",n.createElement(t.h2,{id:"2-a-stopwatch",style:{position:"relative"}},n.createElement(t.a,{href:"#2-a-stopwatch","aria-label":"2 a stopwatch permalink",className:"anchor before"},n.createElement(t.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. A stopwatch"),"\n",n.createElement(t.p,null,"Let's implement a stopwatch having 3 buttons: Start, Stop, Reset, and a number displaying the passed seconds."),"\n",n.createElement(t.p,null,"Now let's think about structuring the state of the stopwatch."),"\n",n.createElement(t.p,null,"There are 2 important state properties: a boolean indicating whether the stopwatch runs â ",n.createElement(t.code,null,"isRunning"),", and a number indicating the number of passed seconds â ",n.createElement(t.code,null,"time"),". Here's how the ",n.createElement(t.em,null,"initial state")," can look like:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"initialState ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" isRunning",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"false",props:{style:{color:"#D19A66"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" time",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The initial state indicates that the stopwatch is initialized as inactive and at ",n.createElement(t.code,null,"0")," seconds."),"\n",n.createElement(t.p,null,"Then let's consider what ",n.createElement(t.em,null,"action objects")," the stopwatch should have. You need 4 kinds of actions: to start, stop and reset the stopwatch running process, as well as tick the time each second."),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// The start action object",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"{ type: ",props:{style:{color:"#ABB2BF"}}},{content:"'start'",props:{style:{color:"#98C379"}}},{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// The stop action object",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"{ type: ",props:{style:{color:"#ABB2BF"}}},{content:"'stop'",props:{style:{color:"#98C379"}}},{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// The reset action object",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"{ type: ",props:{style:{color:"#ABB2BF"}}},{content:"'reset'",props:{style:{color:"#98C379"}}},{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// The tick action object",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"{ type: ",props:{style:{color:"#ABB2BF"}}},{content:"'tick'",props:{style:{color:"#98C379"}}},{content:" }",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Having the state structure, as well as the possible actions, let's use the ",n.createElement(t.em,null,"reducer")," function to define how the action objects update the state:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"reducer",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:"'start'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" { ...",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"isRunning",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'stop'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" { ...",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"isRunning",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"false",props:{style:{color:"#D19A66"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'reset'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"isRunning",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"false",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"time",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" case ",props:{style:{color:"#C678DD"}}},{content:"'tick'",props:{style:{color:"#98C379"}}},{content:":",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" { ...",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"time",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"time ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{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(t.p,null,"Finally, here's the component ",n.createElement(t.code,null,"Stopwatch")," that wires everything together by invoking the ",n.createElement(t.code,null,"useReducer()")," hook:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"useReducer",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"useEffect",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"useRef",props:{style:{color:"#E06C75"}}},{content:" } ",props:{style:{color:"#ABB2BF"}}},{content:"from ",props:{style:{color:"#C678DD"}}},{content:"'react'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"Stopwatch",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"state",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:"reducer",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"initialState",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"idRef ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"useRef",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" useEffect",props:{style:{color:"#61AFEF"}}},{content:"(() ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" if",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"!",props:{style:{color:"#56B6C2"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"isRunning",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"}}}]},{tokens:[{content:" idRef",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"current ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"setInterval",props:{style:{color:"#61AFEF"}}},{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:"'tick'",props:{style:{color:"#98C379"}}},{content:" }), ",props:{style:{color:"#ABB2BF"}}},{content:"1000",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return",props:{style:{color:"#C678DD"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" clearInterval",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"idRef",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"current",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" idRef",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"current ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" }, [",props:{style:{color:"#ABB2BF"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"isRunning",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:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" {",props:{style:{color:"#C678DD"}}},{content:"state",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"time",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"s",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:"() ",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:"'start'",props:{style:{color:"#98C379"}}},{content:" })",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">",props:{style:{c
1olor:"#ABB2BF"}}}]},{tokens:[{content:" Start",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"button",props:{style:{color:"#E06C75"}}},{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:"() ",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:"'stop'",props:{style:{color:"#98C379"}}},{content:" })",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" Stop",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"button",props:{style:{color:"#E06C75"}}},{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:"() ",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:"'reset'",props:{style:{color:"#98C379"}}},{content:" })",props:{style:{color:"#ABB2BF"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" Reset",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",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:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.a,{href:"https://codesandbox.io/s/use-reducer-stopwatch-d1ocz?file=/src/Stopwatch.js",target:"_blank",rel:"noopener noreferrer"},"Open the demo.")),"\n",n.createElement(t.p,null,"The click event handlers of the Start, Stop, and Reset buttons correspondingly use the ",n.createElement(t.code,null,"dispatch()")," function to dispatch the corresponding action object."),"\n",n.createElement(t.p,null,"Inside the ",n.createElement(t.code,null,"useEffect()")," callback, if ",n.createElement(t.code,null,"state.isRunning")," is ",n.createElement(t.code,null,"true"),", the ",n.createElement(t.code,null,"setInterval()")," timer function dispatches the tick action object each second ",n.createElement(t.code,null,"dispatch({type: 'tick'})"),"."),"\n",n.createElement(t.p,null,"Each time the ",n.createElement(t.code,null,"reducer()")," function updates the state, the component receives the new state and re-renders."),"\n",n.createElement(t.h2,{id:"3-a-mental-model",style:{position:"relative"}},n.createElement(t.a,{href:"#3-a-mental-model","aria-label":"3 a mental model permalink",className:"anchor before"},n.createElement(t.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. A mental model"),"\n",n.createElement(t.p,null,"To solidify your knowledge even more, let's see a real-world example that works similarly to a reducer."),"\n",n.createElement(t.p,null,"Imagine you're the captain of a ship in the first half of the 20th century."),"\n",n.createElement(t.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/3431accfbb664f906b4aedc17767fe3d/0c674/engine-order-telegraph-2.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: 56.42857142857143%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEEAv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFbjSWEQf/EABsQAAIBBQAAAAAAAAAAAAAAAAIRAAEQEhMx/9oACAEBAAEFAgJ1zU2Tht2//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BZ//EABcQAAMBAAAAAAAAAAAAAAAAAAABECH/2gAIAQEABj8CHMv/xAAcEAACAQUBAAAAAAAAAAAAAAAAAREhMUFRcYH/2gAIAQEAAT8hThfR29dSj0c1SUm3cl7P/9oADAMBAAIAAwAAABAE3//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPxCVj//EABYRAAMAAAAAAAAAAAAAAAAAAAEQQf/aAAgBAgEBPxAIv//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExUWFBcZH/2gAIAQEAAT8QuyY8tkD1zKJTQL5i+pVyg63LQu6McRtEqLXzudj7P//Z\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Engine Order Telegraph"\n title=""\n src="/static/3431accfbb664f906b4aedc17767fe3d/9605b/engine-order-telegraph-2.jpg"\n srcset="/static/3431accfbb664f906b4aedc17767fe3d/c496c/engine-order-telegraph-2.jpg 140w,\n/static/3431accfbb664f906b4aedc17767fe3d/cbbf7/engine-order-telegraph-2.jpg 280w,\n/static/3431accfbb664f906b4aedc17767fe3d/9605b/engine-order-telegraph-2.jpg 560w,\n/static/3431accfbb664f906b4aedc17767fe3d/97efb/engine-order-telegraph-2.jpg 840w,\n/static/3431accfbb664f906b4aedc17767fe3d/8ae37/engine-order-telegraph-2.jpg 1120w,\n/static/3431accfbb664f906b4aedc17767fe3d/0c674/engine-order-telegraph-2.jpg 2688w"\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(t.p,null,"The captain's bridge has a special communication device called ",n.createElement(t.em,null,"engine order telegraph")," (see the picture above). This communication tool is used to transmit commands from the bridge to the engine room. Typical commands would be to move ",n.createElement(t.em,null,"back slowly"),", move ",n.createElement(t.em,null,"ahead half")," power, ",n.createElement(t.em,null,"stop"),", etc."),"\n",n.createElement(t.p,null,"You're on the bridge and the ship is at full stop. You (the captain) want the ship to move forward at full speed. You'd approach the engine order telegraph and set the handle to ",n.createElement(t.em,null,"ahead full"),". The engineers in the engine room, having the same device, see the ",n.createElement(t.em,null,"ahead full")," command, and set the engine to the corresponding regime."),"\n",n.createElement(t.p,null,"The ",n.createElement(t.em,null,"engine order telegraph")," is the ",n.createElement(t.em,null,"dispatch")," function, the ",n.createElement(t.em,null,"commands")," are the ",n.createElement(t.em,null,"action objects"),", the ",n.createElement(t.em,null,"engineers in the engine room")," are the ",n.createElement(t.em,null,"reducer")," function, and the ",n.createElement(t.em,null,"engine regime")," is the ",n.createElement(t.em,null,"state"),"."),"\n",n.createElement(t.p,null,"The engine order telegraph helps separate the bridge from the engine room. In the same way the ",n.createElement(t.code,null,"useReducer()")," hook helps separate the rendering from the state management logic."),"\n",n.createElement(t.h2,{id:"4-conclusion",style:{position:"relative"}},n.createElement(t.a,{href:"#4-conclusion","aria-label":"4 conclusion permalink",className:"anchor before"},n.createElement(t.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(t.p,null,"The ",n.createElement(t.code,null,"useReducer()")," hook lets you separate the state management from the rendering logic of the component."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"const [state, dispatch] = useReducer(reducer, initialState)")," accepts 2 arguments: the reducer function and the initial state. Also, the reducer returns an array of 2 items: the current state and the dispatch function."),"\n",n.createElement(t.p,null,"To update the state call ",n.createElement(t.code,null,"dispatch(action)")," with the appropriate action object. The action object is then forwarded to the ",n.createElement(t.code,null,"reducer()")," function that updates the state. If the state has been updated by the reducer, then the component re-renders, and ",n.createElement(t.code,null,"[state, ...] = useReducer(...)")," hook returns the new state value."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"useReducer()")," fits great to deal with complex state management (requiring at least 2-3 update actions). For simple state management, I recommend ",n.createElement(t.a,{href:"/react-usestate-hook-guide/"},"useState()"),"."),"\n",n.createElement(t.p,null,n.createElement(t.em,null,"How often do you use ",n.createElement(t.code,null,"useReducer()")," compared to ",n.createElement(t.code,null,"useState()"),"?")))}var i=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?n.createElement(t,e,n.createElement(p,e)):p(e)};function l(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var d=o(12),u=o(5319),g=o(5893);function m(e){let{data:t,children:o}=e;const{featured:{popularPostsByCategory:n}}
1=t.site.siteMetadata,{mdx:r,popularPostsMarkdown:s}=t,a={...r.frontmatter,children:o,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},c=r.internal.contentFilePath.split("/").slice(-3).join("/"),p=s.edges.map(u.sN),i=n.map((e=>{let{category:t,slugs:o}=e;return{category:t,plainPosts:o.map((e=>p.find((t=>{let{slug:o}=t;return e===o}))))}}));return(0,g.jsx)(d.Z,{postRelativePath:c,post:a,popularPostsByCategory:i})}function f(e){return n.createElement(m,e,n.createElement(i,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.