Scribd
Upload
206 views

React Context API

The React Context API allows sharing of data across all levels of a React application. It solves the problem of "prop drilling" where props are passed through many levels of a component tree. Context provides a way to share data like user authentication or theme without explicitly passing props down every level. To use Context, a context object is created and provided with a value, then consumed by wrapping components in a Context.Consumer or using the useContext hook. Context should be used when data needs to be accessible globally rather than just passing props through many levels.

Uploaded by

krishnvamsi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
206 views

React Context API

The React Context API allows sharing of data across all levels of a React application. It solves the problem of "prop drilling" where props are passed through many levels of a component tree. Context provides a way to share data like user authentication or theme without explicitly passing props down every level. To use Context, a context object is created and provided with a value, then consumed by wrapping components in a Context.Consumer or using the useContext hook. Context should be used when data needs to be accessible globally rather than just passing props through many levels.

Uploaded by

krishnvamsi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Click to edit Master title style

React Context API

1
Overview
Click to edit Master title style

• What is Context API


• Before Context API
• After Context API
• When to use Context API
• How to use Context API
• Creating, Providing, Consuming
• Question & Answers

2 2
Whattoisedit
Click React Context
Master title styleAPI

• The Context API is a component


structure provided by the React
framework, which enables us to share
specific forms of data across all levels
of the application.
• It’s aimed at solving the problem of
Prop Drilling

3 3
Before
Click Context
to edit Master API
title style

• Prop Drilling : We pass props down to


the levels and levels of the component
tree when not all of those components
necessarily need those props.
• Suppose component hierarchy is
complex then state management would
be overhead for developers.

4 4
AftertoContext
Click API
edit Master title style

• For state management there are couple


of libraries available like Redux ( Most
used )
• React introduced the Context API to
solve the problem of problems of props
drilling and made developers work of
state management simple.

5 5
Click to edit Master title style

6 6
When
Click to to
edituse Context
Master API
title style

• As React suggests “If you only want to


avoid passing some props through
many levels”
• Context is designed to share data that
can be considered “global” for a tree of
React components.
• Such as the current authenticated user,
theme or preferred language.

7 7
Howtotoedit
Click useMaster
Context API
title style

8 8
Create
Click Context
to edit Master title style

• Const store = React.CreateContext()

9 9
Context.Provider
Click to edit Master title style

• Every Context object comes with a


Provider React component that allows
consuming components to subscribe to
context changes.

• <store.Provider value={someValue}>

1010
Context.Consumer
Click to edit Master title style

• A React component that subscribes to


context changes. This lets you
subscribe to context within a function
component.

<store.Consumer>
value={someValue}>
</store.Consumer>

1111
Context
Click consuming
to edit using
Master title style useContext hook

• Const value = React.useContext(store)

1212
Resources
Click to edit Master title style

• https://reactjs.org/docs/context.html

1313
Questions
Click & Answers
to edit Master title style

• Can context replace Redux?


Yeah context can replace Redux, but it
won’t do everything that Redux does. In
Particular, it won’t perform any of the
optimizations that redux gives you for
free. So before you replace Redux with
Context, there’s a thing or two that you
should know about performance.

1414
Questions
Click & Answers
to edit Master (Cont…)
title style

• Redux provides time traveler debugging


• It provides debugging tools
• It provides middle wares
• It combines different reducers they
don’t affect each other.

1515
Click to edit Master title style

Thank You

16

You might also like