PROJECTS
React
REACT
additional library (popular ones include Redux or
Apollo GraphQL) or having to get busy with a lot of
‘prop drilling’.
Prop drilling means passing data up and down
multiple layers of components, which could
be laborious, difficult to change when new
requirements are built and lead to confusing code.
The Context API, released in React 16.3, aims to
reduce our dependency on laborious prop drilling and
external libraries.
Apps can perform faster because changes made
to properties no longer require a huge amount of
re-rendering on a parent component. The changes
can be made in a separate component and handed
down to child components from there.USE REACT’S CONTEXT API
TO BOOST PERFORMANCE
Ben Readreveals how the Context API can remove the need for laborious
re-rendering, resulting in faster apps
People are demanding more and more out of
their online services and businesses strive to
exceed these demands – which leads us to create
more and more complex sites – which leads us to
create larger and larger JavaScript bundles.
But is there a solution that enables us to continue
delivering a first-class experience for users while
at the same time still building for these levels of
complexity? One good way of achieving this – and at
the same time delivering more performant apps – is
by using React’s Context API.WHAT IS CONTEXT AND WHY USE IT?
Sharing data and other properties across multiple
React components previously required either anABOUT THE AUTHOR
BEN READ
t: @muzzlehatch_
job: Designer and
developer
areas of expertise:
JavaScript, React and UX