{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blog/how-to-avoid-default-props-render-trap-in-react/","result":{"data":{"site":{"siteMetadata":{"name":"Huzaifa Rasheed","title":"Huzaifa Rasheed","description":"Software Engineer","about":"\n Hey, I'm Huzaifa.\n

\n Engineer by trade, builder by instinct - I believe in owning my stack, shipping fast, and occasionally running on chai (tea) and stubbornness. I work best in that sweet spot between deep focus and fast feedback - solo or in sync with a good team.\n

\n This site's my little corner of the internet - part portfolio, part lab - where I document what I build, break, or learn.\n

\n Outside work, I'm into long walks, pixel-perfect headshots in FPS games (eventually... maybe), plants I probably overwater, and the occasional \"classified\" hobby to stay curious.\n

\n Reach out anytime - my digital door's always open. 👋\n ","twitter":"https://twitter.com/huzRasheed","github":"https://github.com/huzaifa-99","linkedin":"https://www.linkedin.com/in/huzaifa-rasheed/","devto":"https://dev.to/huzaifa99","stackoverflow":"https://stackoverflow.com/users/12579290/huzaifa","leetcode":"https://leetcode.com/rhuzaifa","discord":"https://discordapp.com/users/rhuzaifa","email":"dev@rhuzaifa.com","projects":[{"name":"FFMpeg Web","description":"An experimental browser-based terminal that runs FFmpeg using WebAssembly, enabling media processing directly in the browser.","link":"https://ffmpeg-web.rhuzaifa.com/","github":"https://github.com/huzaifa-99/ffmpeg-web"},{"name":"Feed base 2","description":"A mini browser game where players manipulate 4-bit binary blocks to match target BCD values - part puzzle, part binary logic trainer.","link":"https://feedbase2.rhuzaifa.com/","github":"https://github.com/huzaifa-99/feed-base-2"},{"name":"Fabric browser extension","description":"A Chrome extension that injects engineered Fabric prompts directly into the ChatGPT interface for enhanced workflow automation.","link":"https://github.com/huzaifa-99/fabric-browser-extension","github":"https://github.com/huzaifa-99/fabric-browser-extension"},{"name":"Pure Cinema","description":"An experimental, tongue-in-cheek text-to-video generator that stitches together footage, synthesized voiceovers, and background music with a Node.js + ffmpeg pipeline. Not quite Hollywood, but it renders.","link":"https://cinema.rhuzaifa.com","github":null},{"name":"Aria2c Packload","description":"A Bash script for bulk downloading magnet links or torrents using aria2c - optimized for series or list-based transfers.","link":"https://github.com/huzaifa-99/aria2c-packload","github":"https://github.com/huzaifa-99/aria2c-packload"},{"name":"RSS Watchdog","description":"A lightweight Bash script that watches RSS/Atom feeds and compiles a Markdown-based reading checklist for Unix systems.","link":"https://github.com/huzaifa-99/rss-watchdog","github":"https://github.com/huzaifa-99/rss-watchdog"},{"name":"QuoteGen","description":"A quote graphic generator that produces stylized quote images with random selection and a built-in editor for customization.","link":"https://quotegen.rhuzaifa.com/","github":null},{"name":"WebRTC Video Chat","description":"A basic WebRTC-powered app enabling peer-to-peer video and audio calls between two users.","link":"https://webrtc-video-chat.rhuzaifa.com/","github":null}],"experience":null,"skills":[{"name":"Languages & Frameworks","description":"JavaScript, TypeScript, Python, Bash - Frameworks include Node.js, React, Next.js, Vue, React Native, FastAPI."},{"name":"Databases & Storage","description":"PostgreSQL, MySQL, MongoDB - Experience with schema design, indexing, query optimization, and migrations."},{"name":"Cloud & Infrastructure","description":"AWS (EC2, RDS, S3, Lambda), Vercel, Netlify, Heroku - Comfortable with serverless, autoscaling, and cost optimization."},{"name":"DevOps & Tooling","description":"Docker, Git, CI/CD pipelines (GitHub Actions, GitLab CI) - Experience with observability, containerization, and release workflows."},{"name":"Testing & QA Automation","description":"Jest, Playwright, Puppeteer, Selenium - Focus on E2E testing, mocking APIs, and maintaining test coverage."}]}},"markdownRemark":{"id":"88020c08-d066-5373-9d1c-4545ddf9d0af","excerpt":"Repost of https://dev.to/rhuzaifa/how-to-avoid-default-props-render-trap-in-react-4hon What is it? Let’s say we have a component with a default prop like this…","html":"
\n

Repost of https://dev.to/rhuzaifa/how-to-avoid-default-props-render-trap-in-react-4hon

\n
\n

What is it?

\n

Let’s say we have a component with a default prop like this

\n
import React, { useEffect, useState } from \"react\";\n\nconst RerenderChild = ({ value = [] }) => {\n  const [valueFromProp, setValueFromProp] = useState([]);\n\n  useEffect(() => {\n    setValueFromProp(value);\n  }, [value]);\n\n  return (\n    <div>\n     {/* ...component */}\n    </div>\n  );\n};\n\nexport default RerenderChild;
\n

Whenever the value prop is nullish (not set by the calling component), the useEffect causes the component to render infinitely. This is the Default Props Render Trap. We get something like this in the browser console.

\n

\"Infinite

\n

Why It Happens

\n

When we don’t provide the value for the value prop it takes the default value provided as argument, which in our case is []. This triggers the useEffect hook which updates the valueFromProp state. The state change causes the component to re-render.

\n

Now when the component re-renders, it takes the new prop values which again are the default one’s. This again triggers the useEffect and the whole cycle repeats. That’s why we end up with an infinite loop.

\n

The Solution

\n

We have to make the default prop values a part of our component definition. We can do that in these ways.

\n

1. Use defaultProps property.
\nWe can set the default props value by using the component’s defaultProps property. Our component now becomes

\n
import React, { useEffect, useState } from \"react\";\n\nconst RerenderChild = ({ value }) => {\n  const [valueFromProp, setValueFromProp] = useState([]);\n\n  useEffect(() => {\n    setValueFromProp(value);\n  }, [value]);\n\n  return (\n    <div>\n      {/* ...component */}\n    </div>\n  );\n};\n\nRerenderChild.defaultProps = {\n  value: [],\n};\n\nexport default RerenderChild;
\n

2. Declare default props as constants.
\nWe can declare constants outside of our component and set them as our default prop value.

\n
import React, { useEffect, useState } from \"react\";\n\nconst DEFAULT_VALUE = [];\n\nconst RerenderChild = ({ value = DEFAULT_VALUE }) => {\n  const [valueFromProp, setValueFromProp] = useState([]);\n\n  useEffect(() => {\n    setValueFromProp(value);\n  }, [value]);\n\n  return (\n    <div>\n      {/* ...component */}\n    </div>\n  );\n};\n\nexport default RerenderChild;
\n

Hope this helps you to avoid the infinite loop. Thanks 😊.

","frontmatter":{"title":"How to Avoid Default Props Render Trap in React","date":"February 20, 2022","description":"Avoid infinite re-renders in your react components"}}},"pageContext":{"slug":"/blog/how-to-avoid-default-props-render-trap-in-react/","previous":{"fields":{"slug":"/blog/add-google-recaptcha-v2-to-plain-html/"},"frontmatter":{"title":"Add Google reCAPTCHA v2 to plain HTML"}},"next":{"fields":{"slug":"/blog/valid-sudoku-algo-leetcode/"},"frontmatter":{"title":"Valid Sudoku Algo - Leetcode"}}}},"staticQueryHashes":["2276319502"]}