Techniques to optimize React render performance: part 2

• use-deep-compare-effect

  6 1,850 0.0 TypeScript

  🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality

Unfortunately useMemo does not accept a second comparison argument like React.memo. If you want to do a deep comparison there are several code samples and libraries out there you can use.

• memoize-one

  2 2,912 0.0 TypeScript

  A memoization library which only remembers the latest invocation

Caching computed values in class components is a bit clunkier, especially if you are trying to avoid the UNSAFE_componentWillReceiveProps() lifecycle function. The React maintainers recommend using the memoize-one library:

• SurveyJS

  surveyjs.io sponsored

  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.

  

• react-virtualized

  40 25,936 1.6 JavaScript

  React components for efficiently rendering large lists and tabular data

You can leverage libraries like react-virtualized or react-window to handle this for you.

• react-window

  38 15,254 2.6 JavaScript

  React components for efficiently rendering large lists and tabular data

You can leverage libraries like react-virtualized or react-window to handle this for you.

Suggest a related project