[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react":671,"blog-author-\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react":1334,"i-material-symbols:arrow-back-rounded":1346},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1321,"buttonUrl":1321,"category":1322,"date":1323,"description":1324,"draft":1325,"editorsPick":1325,"extension":1326,"featured":1325,"image":1327,"imageAlt":1328,"meta":1329,"navigation":32,"ogImage":1321,"ogImageAlt":1321,"path":1330,"seo":1331,"stem":1332,"tags":1321,"__hash__":1333},"blog\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react.md","React: Controlled vs Uncontrolled Components","Raman Hundal","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fauthor.jpeg","Raman Hundal.","raman-hundal",{"type":679,"value":680,"toc":1310},"minimark",[681,685,688,694,697,717,722,734,737,752,755,762,769,772,838,847,853,859,871,874,877,891,894,902,906,909,912,918,940,946,951,957,964,967,970,975,981,1012,1116,1119,1133,1136,1144,1152,1155,1158,1161,1164,1170,1176,1179,1281,1285,1288,1291,1294,1299,1302],[682,683,684],"p",{},"Let's talk about React controlled vs uncontrolled components. We’ll discuss their advantages and disadvantages, investigate some examples along the way, and finally, look at Formik, a form library available in the React ecosystem.",[682,686,687],{},"Without further ado, let’s get started!",[682,689,690],{},[691,692,693],"strong",{},"Prerequisites",[682,695,696],{},"To follow along with this article, I would highly recommend reading these articles for some background:",[698,699,700,710],"ul",{},[701,702,703],"li",{},[704,705,709],"a",{"href":706,"rel":707},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fcomponents-and-props.html",[708],"nofollow","Class and function based components",[701,711,712],{},[704,713,716],{"href":714,"rel":715},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FFunction\u002Fbind",[708],"Bind function in JS",[718,719,721],"h2",{"id":720},"what-is-a-controlled-component","What is a Controlled Component?",[682,723,724,725,729,730,733],{},"Controlled components are components whose value is directed\u002Fdriven by React’s state. By state, we mean the state we store inside a React component, i.e., inside ",[726,727,728],"code",{},"this.state"," or with ",[726,731,732],{},"useState",".",[682,735,736],{},"This means that these components will receive the latest changes.",[682,738,739,740,743,744,747,748,751],{},"For any controlled component, we pass our state variable inside the ",[726,741,742],{},"value"," prop of the component. The function that changes this ",[726,745,746],{},"state"," variable of the component is passed in the ",[726,749,750],{},"onChange"," prop of the controlled component.",[682,753,754],{},"Here is an example that demonstrates a controlled component:",[682,756,757],{},[758,759],"img",{"alt":760,"src":761},"Code snippet with React code.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fimg-001.png",[682,763,764],{},[704,765,768],{"href":766,"rel":767},"https:\u002F\u002Framan.pieces.cloud\u002F?p=14504e848a",[708],"Save to Pieces",[682,770,771],{},"Let’s explain:",[698,773,774,780,798,808,818,830],{},[701,775,776,779],{},[726,777,778],{},"App"," is a simple function-based React component.",[701,781,782,783,786,787,790,791,794,795,797],{},"Its ",[726,784,785],{},"render"," method consists of a ",[726,788,789],{},"form"," with an ",[726,792,793],{},"input"," element and a ",[726,796,691],{}," element that displays the value of the state variable of the component.",[701,799,800,801,804,805,807],{},"We pass the state variable ",[726,802,803],{},"inputValue"," as a ",[726,806,742],{}," prop to the input element.",[701,809,810,811,814,815,817],{},"Similarly, we pass the ",[726,812,813],{},"handleOnChange"," function to the ",[726,816,750],{}," prop of the input component.",[701,819,820,821,823,824,826,827,829],{},"Now, whatever you type inside the input element will set the value of the ",[726,822,803],{}," state via ",[726,825,813],{},", and then the same will be displayed in the ",[726,828,793],{}," element.",[701,831,832,833,835,836,829],{},"To show that the state variable ",[726,834,803],{}," is changing, we display it inside the ",[726,837,691],{},[682,839,840,841,843,844,846],{},"The controlled component’s ",[726,842,742],{}," prop does not always need to be a component’s internal state. It can be a prop of the parent component, or it can come from the Redux store. This is similar to the ",[726,845,750],{}," prop.",[682,848,849],{},[758,850],{"alt":851,"src":852},"A code snippet with React code.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fimg-002.png",[682,854,855],{},[704,856,768],{"href":857,"rel":858},"https:\u002F\u002Framan.pieces.cloud\u002F?p=5c79419b8f",[708],[682,860,861,862,865,866,868,869,733],{},"In a similar manner, we can use ",[726,863,864],{},"react-redux"," to get the state and the ",[726,867,813],{}," function from the Redux store to have similar functionality to what we had when we were using ",[726,870,732],{},[682,872,873],{},"The same context can be applied to the checkbox, radio, text area, and select DOM elements so that they can act as controlled elements.",[682,875,876],{},"Here are some of the advantages of using controlled components:",[698,878,879,882,885,888],{},[701,880,881],{},"The UI and the data are in sync",[701,883,884],{},"Form data can be passed between different components",[701,886,887],{},"The event handler and the value prop can be from the parent or a redux store",[701,889,890],{},"The React component acts as a source of truth for this component",[682,892,893],{},"Some disadvantages of controlled components:",[698,895,896,899],{},[701,897,898],{},"They render at each input change",[701,900,901],{},"A controlled component can be a bad choice when large changes are required to be made to the component",[718,903,905],{"id":904},"what-is-a-react-uncontrolled-component","What is a React Uncontrolled Component?",[682,907,908],{},"As the name suggests, the value of uncontrolled components is not driven by the React component’s state variable. It's completely controlled by the DOM.",[682,910,911],{},"Uncontrolled components are generally used when the use case is simple or the action is not trackable; for example, a user uploading a file using file input.",[682,913,914,915,917],{},"The basic requirement of any uncontrolled component is to be handled by the DOM. In this case, we cannot pass the ",[726,916,746],{}," variable inside the form’s input element. Now the question arises — how are we going to set the value inside this input element?",[682,919,920,921,924,925,928,929,931,932,935,936,939],{},"We use React’s ",[726,922,923],{},"useRef"," for functional components or ",[726,926,927],{},"createRef"," for class-based components. A ",[726,930,923],{}," is a hook that returns a mutable object with ",[726,933,934],{},"current"," as its property with value being ",[726,937,938],{},"initialValue"," that is passed inside the hook.",[682,941,942,943,945],{},"Here is the syntax of the ",[726,944,923],{}," hook:",[682,947,948],{},[758,949],{"alt":851,"src":950},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fimg-003.png",[682,952,953],{},[704,954,768],{"href":955,"rel":956},"https:\u002F\u002Framan.pieces.cloud\u002F?p=c64a479614",[708],[682,958,959,960,963],{},"A ",[726,961,962],{},"ref"," object can be used in many ways, e.g., as a state variable that does not re-render the component on change, to access DOM elements, etc.",[682,965,966],{},"We can leverage this into our React uncontrolled component to access input elements attributes, i.e., value properties.",[682,968,969],{},"Here's a simple example of how you can create an uncontrolled component:",[682,971,972],{},[758,973],{"alt":851,"src":974},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fimg-004.png",[682,976,977],{},[704,978,768],{"href":979,"rel":980},"https:\u002F\u002Framan.pieces.cloud\u002F?p=a4984992ae",[708],[682,982,983,984,986,987,989,990,993,994,999,1000,1004,1005,1008,1009,1011],{},"As you can see, this ",[726,985,778],{}," component consists of ",[726,988,789],{}," and a bunch of ",[726,991,992],{},"span"," elements. We use the ",[704,995,998],{"href":996,"rel":997},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002F",[708],"JSON placeholder API"," in the component to fetch the ",[1001,1002,1003],"em",{},"post"," based on ",[726,1006,1007],{},"id",". This is the summary of our component, but let’s understand a bit more about how the ",[726,1010,778],{}," component works internally.",[698,1013,1014,1024,1042,1048,1054,1057,1063,1076,1107],{},[701,1015,1016,1017,1019,1020,1023],{},"Inside the ",[726,1018,789],{}," element, we have a static ",[726,1021,1022],{},"select"," element with a couple of options.",[701,1025,1026,1027,1029,1030,1032,1033,1036,1037,1039,1040,846],{},"We are making use of a ",[726,1028,962],{}," object here. This ",[726,1031,962],{}," object is named as ",[726,1034,1035],{},"selectRef"," and this is being passed on to the ",[726,1038,1022],{}," element as a ",[726,1041,962],{},[701,1043,1044,1045,1047],{},"Here comes the catch— we don’t need to watch for any changes that happen to the ",[726,1046,1022],{}," element, nor do we need to make use of a state variable to keep track of the current value that is selected in this element.",[701,1049,1050,1051,1053],{},"This begs the question, how do we get the latest value from the ",[726,1052,1022],{}," element?",[701,1055,1056],{},"Well, we don’t need to. This is an uncontrolled component\u002Felement; a component\u002Felement that is managed by the DOM.",[701,1058,1059,1060,1062],{},"So, the change in the ",[726,1061,742],{}," property of the select element is managed by the browser.",[701,1064,1065,1066,1069,1070,1072,1073,1075],{},"Now we just need to find a way to capture this value. ",[726,1067,1068],{},"refs"," comes to rescue here. Since we passed our ",[726,1071,962],{}," object into the ",[726,1074,1022],{}," element as a prop, we can now access the value present inside this element.",[701,1077,1078,1079,1082,1083,1086,1087,1089,1090,1092,1093,1095,1096,1099,1100,1102,1103,1106],{},"To get hang of this, you can check out the ",[726,1080,1081],{},"handleOnSubmit"," function. This function makes use of the ",[726,1084,1085],{},"selectRef.current.value"," to access the value property of the ",[726,1088,1022],{}," element. The ",[726,1091,1035],{}," stores all of the values inside the ",[726,1094,934],{}," object. In this case, ",[726,1097,1098],{},"selectRef.current"," will store the ",[726,1101,1022],{}," element itself. To access the value, simply access its ",[726,1104,1105],{},".value"," property.",[701,1108,1109,1110,1112,1113,733],{},"Next, the ",[726,1111,1081],{}," function calls the API. On success, we simply store it in the state variable ",[726,1114,1115],{},"apiData",[682,1117,1118],{},"Here are some advantages of uncontrolled components:",[698,1120,1121,1124,1127,1130],{},[701,1122,1123],{},"No component re-renders",[701,1125,1126],{},"Browser DOM handles the changes to the element",[701,1128,1129],{},"Simple to use",[701,1131,1132],{},"Keeps track of the internal state",[682,1134,1135],{},"And some of the disadvantages of uncontrolled components:",[698,1137,1138,1141],{},[701,1139,1140],{},"Cannot be used in complicated scenarios where we need to pass the value to different components",[701,1142,1143],{},"It’s not always efficient to use uncontrolled components where we require granular control over the value",[718,1145,1147],{"id":1146},"formik",[704,1148,1151],{"href":1149,"rel":1150},"https:\u002F\u002Fformik.org\u002F",[708],"Formik",[682,1153,1154],{},"Formik is an open-source library to build forms in React and React Native. It’s the world’s leading library for building forms in React.",[682,1156,1157],{},"Formik is a complete solution that helps you to implement form validation, keep track of visited fields, and handle form submission in an efficiently and robustly. It's based on the concept of a controlled component react.",[682,1159,1160],{},"Now, let’s look at one simple example of how can Formik can be used to build a form along with the form validation.",[682,1162,1163],{},"We are going to use the same uncontrolled component example. First, we’ll convert the example into a controlled component and then, use Formik to make our life easier.",[682,1165,1166],{},[758,1167],{"alt":1168,"src":1169},"A code snippet with a React component.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fimg-005.png",[682,1171,1172],{},[704,1173,768],{"href":1174,"rel":1175},"https:\u002F\u002Framan.pieces.cloud\u002F?p=d424419f0c",[708],[682,1177,1178],{},"Here are some of the brief points that will get you up to speed on understanding the above component:",[698,1180,1181,1184,1189,1196,1209,1216,1219,1233,1239,1252,1265],{},[701,1182,1183],{},"The Formik library provides us with some easy-to-use components that help us to build Formik forms in no time.",[701,1185,1186,1188],{},[1001,1187,1151],{}," is a wrapper component that helps to build forms.",[701,1190,1191,1192,1195],{},"It takes in ",[726,1193,1194],{},"initialValues",", which tells the Formik form about the fields and their initial values.",[701,1197,1198,1199,1202,1203,1208],{},"Next, we have the ",[726,1200,1201],{},"validationSchema"," prop. It can accept a ",[704,1204,1207],{"href":1205,"rel":1206},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup",[708],"Yup"," object to define validations inside the form.",[701,1210,1211,1212,1215],{},"Finally, we provide our ",[726,1213,1214],{},"submitHandler"," function as a callback that needs to be executed whenever a submission takes place.",[701,1217,1218],{},"This is a controlled component. All the values are handled by Formik.",[701,1220,1221,1222,1224,1225,1228,1229,1232],{},"In the above component, we have used ",[726,1223,1151],{},", ",[726,1226,1227],{},"Field"," and ",[726,1230,1231],{},"ErrorMessage"," components. These are similar to the normal input elements present inside the form element.",[701,1234,1235,1236,1238],{},"The ",[726,1237,1227],{}," component, as the name suggests, acts as a wrapper component on top of form input elements.",[701,1240,1241,1242,1244,1245,1248,1249,1251],{},"Finally, we have the ",[726,1243,1231],{}," component. This component takes in the ",[726,1246,1247],{},"name"," prop. This ",[726,1250,1247],{}," prop will be used by this component to provide an element that displays the error message for that particular field.",[701,1253,1254,1255,1228,1257,1259,1260,1228,1262,1264],{},"Now, you might be wondering how these components know which field they should work for. Here comes the ",[726,1256,1247],{},[726,1258,1007],{}," props to the rescue. You should provide either of these props to make sure your ",[726,1261,1227],{},[726,1263,1231],{}," components work properly.",[701,1266,1267,1268,1271,1272,1275,1276,1228,1278,1280],{},"We should also make sure that we pass the submitted values to Yup’s ",[726,1269,1270],{},"validations"," that we set earlier.  For example, for the select field, we pass in ",[726,1273,1274],{},"name=\"selectVal\""," in the ",[726,1277,1227],{},[726,1279,1231],{}," components. In this way, Formik knows how to map these wrapper components to their respective fields.",[718,1282,1284],{"id":1283},"summary","Summary",[682,1286,1287],{},"Now, you've learned some of the differences of React controlled vs uncontrolled components. Choosing which type of component to use in your project completely depends upon your use case.",[682,1289,1290],{},"If you’re looking for tangible results with a simple use case or trying to use memory-intensive operations, such as document editors, uncontrolled components are the way to go.",[682,1292,1293],{},"If you’re looking for more granular control over the values of form elements, then you should use controlled components.",[1295,1296,1298],"h3",{"id":1297},"become-more-productive-writing-your-react-apps","Become More Productive Writing Your React Apps",[682,1300,1301],{},"Every component you create in React requires tons of repetition. Across every frontend project, there are custom setups and best practices that teams follow. Pieces helps you with any React project by creating a local micro-repository where you can store any code snippets and their relevant metadata on your machine. Additionally, Pieces makes it incredibly easy to share your snippets, create collections to onboard others onto a project, and even integrate your snippets directly in your IDE. Our team of developers is pushing changes every day to build the most effective and efficient micro-repo for you.",[682,1303,1304,1309],{},[704,1305,1308],{"href":1306,"rel":1307},"https:\u002F\u002Fpieces.app\u002Finstall",[708],"Try Pieces now using the personal plan for free and supercharge your React projects","!",{"title":1311,"searchDepth":1312,"depth":1312,"links":1313},"",2,[1314,1315,1316,1317],{"id":720,"depth":1312,"text":721},{"id":904,"depth":1312,"text":905},{"id":1146,"depth":1312,"text":1151},{"id":1283,"depth":1312,"text":1284,"children":1318},[1319],{"id":1297,"depth":1320,"text":1298},3,null,"Software Development","2022-08-02T00:00:00.000Z","Let's talk about controlled vs uncontrolled React components, with some examples. We’ll discuss their advantages and disadvantages, and finally, we’ll look at the Formik library.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react\u002Fhero.jpg","Bank of control dials and knobs.",{},"\u002Fblog\u002Fcontrolled-vs-uncontrolled-components-in-react",{"title":673,"description":1324},"blog\u002Fcontrolled-vs-uncontrolled-components-in-react","gJvD8Z7hLMRjlYuTc9oy99SRH1Ua0ifYU_qCLb_zGAg",{"id":1335,"title":674,"body":1336,"description":1311,"draft":1325,"extension":1326,"meta":1340,"navigation":32,"path":1341,"photo":1342,"photoAlt":1321,"seo":1343,"stem":1344,"__hash__":1345},"authors\u002Fauthors\u002Framan-hundal.md",{"type":679,"value":1337,"toc":1338},[],{"title":1311,"searchDepth":1312,"depth":1312,"links":1339},[],{},"\u002Fauthors\u002Framan-hundal","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Framan-hundal.jpeg",{"title":674,"description":1311},"authors\u002Framan-hundal","lPCfuQIsZeQkzqLHzL9n9IXlR9buEK9et5U6TWBUULg",{"left":1347,"top":1347,"width":1348,"height":1348,"rotate":1347,"vFlip":1325,"hFlip":1325,"body":1349},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]