Performance Impact Using Context API

#react #webdev #programming #advance

Performance impact on Context-API?

UI components where the context is consumed is going to be re-rendered.

Example

If there are 5 components are there and out of 5, 1 component is responsible for showing the counter and updating the counter. The other 4 components are just showcasing message value came from context.
So even though they are not using counter value, they will still re-render.
This will slow down our application.

When and how to use Context API?

case - 1

If the state updates are frequent we should go with redux. (Selector) (Caching)

case - 2

If we have state which remains the same most of the time, we can go for use context

Ex:-

theme
language Preference

case - 3

if we wanted to use context in other places, then split it with smaller multiple contexts. In this case, re-rendering going to be reduced.

Note:-

we can combine context + useReduce, it will help us to update the value using dispatch.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →