Knowledgebase

Performance in React Applications Print

  • frontenddevelopment, frontend, performance, guide, howto, solution, zillionkinghost, hosting
  • 0

Avoiding unnecessary work.

WHAT CAUSES SLOWNESS

Components re-rendering when nothing relevant changed Expensive computation on every render Very large lists Large bundles

WHAT TO DO FIRST

Measure, using the profiling tools.

WHY

Guessing where time goes is usually wrong, and premature optimisation adds complexity for nothing.

WHAT MEMOISATION DOES

Skips re-rendering or recomputation when inputs have not changed.

WHEN TO USE IT

When profiling shows a genuine cost.

WHY NOT EVERYWHERE

It has its own cost, and applied indiscriminately it makes code harder to read for no benefit.

WHAT COMMONLY DEFEATS IT

New objects or functions created during render and passed as props.

WHY

They are different values each time, so nothing is considered unchanged.

WHAT TO DO ABOUT LARGE BUNDLES

Split by route, and load components on demand.

WHAT TO DEFER

Anything not needed for the initial view.

WHAT TO CHECK

Bundle size, and time until interactive, on a modest device.

WHAT TO REMOVE

Dependencies added for one function.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot