{"id":23399724,"url":"https://github.com/ch0ripain/react-optimization-techniques","last_synced_at":"2025-06-17T01:38:45.919Z","repository":{"id":265786152,"uuid":"896642877","full_name":"ch0ripain/react-optimization-techniques","owner":"ch0ripain","description":"🧙‍♂️ Simple react optimization techniques 🧙‍♂️","archived":false,"fork":false,"pushed_at":"2024-12-10T02:51:52.000Z","size":216,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T19:53:10.832Z","etag":null,"topics":["frontend","millionjs","react","react-memo","react-optimization","react-usememo","reactjs","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ch0ripain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-30T22:57:09.000Z","updated_at":"2024-12-10T02:53:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"78b571a6-9429-4db5-a31b-d68d5b2c274c","html_url":"https://github.com/ch0ripain/react-optimization-techniques","commit_stats":null,"previous_names":["ch0ripain/react-optimization-techniques"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ch0ripain/react-optimization-techniques","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-optimization-techniques","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-optimization-techniques/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-optimization-techniques/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-optimization-techniques/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ch0ripain","download_url":"https://codeload.github.com/ch0ripain/react-optimization-techniques/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-optimization-techniques/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260273410,"owners_count":22984489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","millionjs","react","react-memo","react-optimization","react-usememo","reactjs","web-development"],"created_at":"2024-12-22T10:16:16.763Z","updated_at":"2025-06-17T01:38:45.892Z","avatar_url":"https://github.com/ch0ripain.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e🧙‍♂️ React optimization techniques 🧙‍♂️\u003c/h1\u003e \nIn this project i put hands-on working in React optimization techniques going through \u003ccode\u003e⚙️ memo()\u003c/code\u003e, \u003ccode\u003e⚙️ useMemo()\u003c/code\u003e, \u003cstrong\u003e🧩️ Clever Structuring 🧩️\u003c/strong\u003e and one optimization compiler called \u003cstrong\u003e⚡️MillionJS⚡️\u003c/strong\u003e\n\n## ⚙️ Using \u003ccode\u003ememo()\u003c/code\u003e ⚙️\n\u003ccode\u003ememo()\u003c/code\u003e is a utility provided by React that helps prevent unnecessary re-renders of a component when its props remain unchanged.\n```javascript\nconst IconButton = memo(function IconButton({ children, icon, ...props }) {\n  ...\n});\n\nexport default IconButton;\n```\n\nIn the example above, \u003ccode\u003ememo()\u003c/code\u003e takes a component function as an argument and memoizes it. When a parent component re-renders, the memoized component won't re-render unless its props change.\n- children ➡️ This is static and does not change.\n- icon ➡️ This is an external SVG component, always the same.\n- ...props ➡️ Includes an onClick handler that could change on every render due to function recreation.\n- \nTo address unnecessary re-renders caused by recreated functions, you can wrap the function in useCallback():\n\n  const handleDecrement = useCallback(function handleDecrement() {\n    ...\n  }, []);\n\nWith this approach, \u003ccode\u003ememo()\u003c/code\u003e is used effectively.\n\n\u003e [!NOTE]\n\u003e It's common practice to wrap functions passed as props in useCallback() when using \u003ccode\u003ememo()\u003c/code\u003e or useEffect()\n\n## 🧩️ \u003cstrong\u003eClever Structuring\u003c/strong\u003e 🧩️\nSometimes it can be normal to want to wrap all our components in a \u003ccode\u003ememo()\u003c/code\u003e but that will be unproductive and highly inadvisable since memo only needs to be used in a key component that groups a few or a group of components that do not need to be re-rendered. We can handle all that behavior in a common component with \u003ccode\u003ememo()\u003c/code\u003e if we think it is the better approach.\n```javascript\nconst Counter = memo(function Counter({ initialCount }) {\n...some components\n}\nexport default Counter;\n```\nThis Counter component in my React app will always be modified by that property, since the counter property is always changing because that's the behavior I want in my app.\nThe use of \u003ccode\u003ememo()\u003c/code\u003e here is a bit pointless because there are no useful cases to avoid re-rendering.\n\nIn this case a better approach will be a clever structure\n\n```javascript\n//CODE WITH MEMO\nfunction App() {\n  log('\u003cApp /\u003e rendered');\n\n  const [enteredNumber, setEnteredNumber] = useState(0);\n  const [chosenCount, setChosenCount] = useState(0);\n\n  function handleChange(event) {\n    setEnteredNumber(+event.target.value);\n  }\n\n  function handleSetClick() {\n    setChosenCount(enteredNumber);\n    setEnteredNumber(0);\n  }\n\n  return (\n    \u003c\u003e\n      ...\n      \u003csection id=\"configure-counter\"\u003e\n          \u003ch2\u003eSet Counter\u003c/h2\u003e\n          \u003cinput type=\"number\" onChange={handleChange} value={enteredNumber} /\u003e\n          \u003cbutton onClick={handleSetClick}\u003eSet\u003c/button\u003e\n        \u003c/section\u003e\n        \u003cCounter initialCount={chosenCount} /\u003e //Notice that this component is being re-rendered caused that chosenCount prop is changing frequently caused by some state\n      ...\n    \u003c/\u003e\n```\n```javascript\n//CODE WITH CLEVER STRUCTURING\nfunction App() {\n  log(\"\u003cApp /\u003e rendered\");\n\n  const [chosenCount, setChosenCount] = useState(0);\n\n  function handleSetCount(newCount) {\n    setChosenCount(newCount);\n  }\n\n  return (\n    \u003c\u003e\n      \u003cHeader /\u003e\n      \u003cmain\u003e\n        \u003cConfigureCounter onSet={handleSetCount} /\u003e //Now all that state behaviour are in a separate component.\n        \u003cCounter initialCount={chosenCount} /\u003e //Counter now only re-renders when its props actually change.\n      \u003c/main\u003e\n    \u003c/\u003e\n```\n\n## ⚙️ \u003ccode\u003euseMemo()\u003c/code\u003e ⚙️ \nIt is very common to have some complex and long functions that consume some computational time, so re-executing that function every time a component is re-rendered could lead to a performance downgrade.\n```javascript\nconst initialCountIsPrime = useMemo(\n    () =\u003e isPrime(initialCount),\n    [initialCount]\n  );\n```\n\u003ccode\u003euseMemo()\u003c/code\u003e needs a function that should return the computed value we want to memoize and an array of dependencies (deps) to re-execute that function only when its dependencies change.\n\n## ⚡️ Million JS - Speed up your website by 70% ⚡️\nMillion.js replace React's virtual DOM with a faster, lightweight virtual DOM, enabling more efficient updates and reducing rendering overhead.\n\n\u003ccode\u003enpx million@latest\u003c/code\u003e\n\nOn installation, you'll be prompted to install the Million Lint build plugin and VSCode extension.\nThat's it! You're all set up 🎉\n\n[See MillionJS docs](https://million.dev/docs)\n\n\nThat's all for this project, in conclusion:\n- \u003ccode\u003ememo()\u003c/code\u003e ➡️ try to memoize a common component and keep an eye on the properties to avoid unnecessary renderings like function recreations (useCallback()) or frequently state changes (\u003cstrong\u003eClever Structuring\u003c/strong\u003e)\n- \u003ccode\u003euseMemo()\u003c/code\u003e ➡️ memoize the computed value of a long and complex function that can take some time and only re-execute when a dependency changes.\n- \u003cstrong\u003eClever Structuring\u003c/strong\u003e ➡️ Allow me to make more agile and readable code by taking advantage of React's way of thinking and avoiding unnecessary hooks.\n\n---\n\u003cp align=\"center\"\u003e🐸 This project is a practice exercise I learned from the \u003ca href='https://www.udemy.com/course/react-the-complete-guide-incl-redux/?couponCode=ST7MT110524'\u003eAcademind's React Course\u003c/a\u003e 🐸\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-optimization-techniques","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fch0ripain%2Freact-optimization-techniques","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-optimization-techniques/lists"}