Why are function components better than class components?

This page summarizes the projects mentioned and recommended in the original post on /r/reactjs

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • why-did-you-render

    why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)

  • The real question comes down to: Is your team smart enough to prevent unnecessary renders with custom hooks/functional components, and to do so in a readable way? I'd bet money that they aren't. Not to sound like a broken record, but I have never come across a codebase that does this properly. All the ones I encounter have so many components that use e.g. which always causes a re-render because the style object is new on every MyComponent() call. Code like this is what makes the why-did-you-render browser extension even necessary in the first place, and is why your "simple" component now has to be ridiculously complicated with infinite nesting in useMemo(), useCallback(), etc. just to make it run as it would if it were a simple class component. And, IMO, those make code even more complicated, harder to read/debug (especially debug!), and comprehend than a simple class.prototype.method would.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts