{"id":31135816,"url":"https://github.com/noamelb/shouldcomponentupdate-children","last_synced_at":"2025-09-18T07:37:11.646Z","repository":{"id":57358911,"uuid":"100406902","full_name":"NoamELB/shouldComponentUpdate-Children","owner":"NoamELB","description":"React \"Shallow Equal\" HOC implementation to optimize shouldComponentUpdate with children / React elements 🐇➰","archived":false,"fork":false,"pushed_at":"2017-11-28T19:53:38.000Z","size":50,"stargazers_count":266,"open_issues_count":1,"forks_count":10,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-08-25T11:22:49.652Z","etag":null,"topics":["hoc","props","react","react-elements","shouldcomponentupdate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NoamELB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-15T18:26:55.000Z","updated_at":"2025-07-17T16:50:08.000Z","dependencies_parsed_at":"2022-09-06T22:21:52.800Z","dependency_job_id":null,"html_url":"https://github.com/NoamELB/shouldComponentUpdate-Children","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NoamELB/shouldComponentUpdate-Children","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoamELB%2FshouldComponentUpdate-Children","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoamELB%2FshouldComponentUpdate-Children/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoamELB%2FshouldComponentUpdate-Children/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoamELB%2FshouldComponentUpdate-Children/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NoamELB","download_url":"https://codeload.github.com/NoamELB/shouldComponentUpdate-Children/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoamELB%2FshouldComponentUpdate-Children/sbom","scorecard":{"id":102201,"data":{"date":"2025-08-11","repo":{"name":"github.com/NoamELB/shouldComponentUpdate-Children","commit":"3eb89296d8df1dc72ce6d862736e1789c13d0ac0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/16 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"77 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T10:22:27.774Z","repository_id":57358911,"created_at":"2025-08-15T10:22:27.774Z","updated_at":"2025-08-15T10:22:27.774Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275730989,"owners_count":25518085,"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","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["hoc","props","react","react-elements","shouldcomponentupdate"],"created_at":"2025-09-18T07:37:06.883Z","updated_at":"2025-09-18T07:37:11.637Z","avatar_url":"https://github.com/NoamELB.png","language":"JavaScript","readme":"# shouldComponentUpdate-Children\nA PureComponent alternative that will actually improve your application performance!\n\n\"Shallow Equal\" HOC implementation to optimize shouldComponentUpdate with children / React elements.\n\nSee live example here: [codepen.io/NoamELB/pen/RLoxLv](https://codepen.io/NoamELB/pen/RLoxLv?editors=0010)\n\n# Usage\n### Install\n```\nnpm i -S shouldcomponentupdate-children\n```\n\n### Option 1: As an [HOC](https://facebook.github.io/react/docs/higher-order-components.html) when exporting a component:\n```javascript\nimport {useShallowEqual} from 'shouldcomponentupdate-children';\n\nclass MyComponent extends React.Component {\n    ....\n}\nconst MyPerformantComponent = useShallowEqual(MyComponent);\n\nexport default MyPerformantComponent;\n```\n### Option 2: As an [HOC](https://facebook.github.io/react/docs/higher-order-components.html) when importing a component:\n```javascript\nimport {useShallowEqual} from 'shouldcomponentupdate-children';\nimport MyComponent from './my-component';\n\nconst MyPerformantComponent = useShallowEqual(MyComponent); // use it just like you would use MyComponent\n```\n\n### Option 3: As the shouldComponentUpdate implementation\n```javascript\nimport {shallowEqual} from 'shouldcomponentupdate-children';\n\nclass MyComponent extends React.Component {\n    shouldComponentUpdate(nextProps, nextState) {\n        return shallowEqual(this.props, nextProps, this.state, nextState);\n    }\n}\nexport default MyComponent;\n```\n\n# The Problem\nReact will create a new instance of a React Element on each *render*, so generic implementations to shouldComponentUpdate will return true even if nothing had changed!\n\nBasically, this simple shouldComponentUpdate implementation:\n```javascript\nreturn this.props.children !== nextProps.children;\n```\nis almost as good as writing:\n```javascript\nreturn true;\n```\n\nSee live example here: [codepen.io/NoamELB/pen/RLoxLv](https://codepen.io/NoamELB/pen/RLoxLv?editors=0010)\n\nRead more about it here: https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6\n\n# Our Solution\n**We created an [HOC](https://facebook.github.io/react/docs/higher-order-components.html) which uses [Inheritance Inversion](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#5247) to extend components with a generic shouldComponentUpdate functionality.**\n\nOur generic shouldComponentUpdate implementation does the following:\n* execute the wrapped component's shouldComponentUpdate and continue only if returned *true*.\n* shallow equal *this.state* vs *next state* and return *true* if not equal.\n* shallow equal all *this.props* vs *next props*, but skip React Elements. return *true* if not equal.\n* if reached here - returns false\n\n\n**But isn't this means that if any React Element is actually changing then my component won't render?**\n\nYes, but that is the whole point. **React Elements are not something you can rely upon when implementing shouldComponentUpdate!**\n\nIn order to tell a component that it should render - you can change any non-React-Element prop to indicate a state change (this can be a designated prop just for that or a prop that is actually in use inside the component).\n\n# Q\u0026A\n## Why use shouldComponentUpdate?\nPerformance.\nIf the change in state or props does not affect your component, you can tell React. React will not re-render your component for no reason in that case.\nRead more: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate\n\n## How to use shouldComponentUpdate?\n```javascript\nMyClass extends React.Component {\n    ...\n    shouldComponentUpdate(nextProps, nextState) {\n       // return true or false\n    }\n}\n```\nIt's common to want to re-render when either the state or any prop has changed - so react created a class that does it for us:\n```javascript\nMyClass extends React.PureComponent {\n    ...\n    // don't need to implement shouldComponentUpdate\n}\n```\nRead more: https://facebook.github.io/react/docs/react-api.html#react.purecomponent\n\n## What's the problem with PureComponents?\nIf \"children\" (or any other prop) is a React element or an array, it will send a new instance every time.\nThis means that in most cases, the following check will always be true:\n```javascript\nthis.props.children !== nextProps.children\n```\nThe result is that our component will render even if our prop didn't actually change.\n\n## The solution - shouldComponentUpdate-Children\nWrap your components with this HOC and it will perform a wiser shallow equal check. It will skip props that would have always returned true, regardless of their value:\n```javascript\nconst MyPerformantComponent = useShallowEqual(MyComponent);\n```\n\n## How do you determine that a prop is a React Element\n1. Any prop that returns true for *React.isValidElement(prop)*.\n2. Any array prop that have at least one item which returns true for *React.isValidElement(prop[i])*\n\n## Why implement as an HOC?\nHOC is very useful in this specific case of [Inheritance Inversion](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#5247), you can use it on the outside when importing.\n\nLet's see some nice examples of when to use on the outside:\n* Using a vendor component that has performance issues? Just wrap it with the HOC after the import.\n* Implementing shouldComponentUpdate in a given component is a refactor headache? HOC to the rescue.\n* shouldComponentUpdate is already implemented but not good enough for your usage? you know who to call.\n\nBy tha way, we exports all of the functions from the package, so you can use them directly when implementing shouldComponentUpdate:\n* `shouldComponentUpdate(nextProps, nextState)` - bind the \"this\" to the function and just use it as your shouldComponentUpdate.\n* `shallowEqual(this.props, nextProps, this.state, nextState)` - same but with no need to bind anything.\n* `shallowEqualWithoutReactElements(thisProps, nextProps)` - the actual shallow equal implementation on the props.\n* `shallowEqualState(thisState, nextState)` - the actual shallow equal on the state.\n\n# License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoamelb%2Fshouldcomponentupdate-children","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoamelb%2Fshouldcomponentupdate-children","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoamelb%2Fshouldcomponentupdate-children/lists"}