SlideShare a Scribd company logo
All about Context API
@souvikbasu
Agenda
• What is Context API
• How to use Context API
• When not to use
• Use of renderProps vs HOC in Context API
• Nesting of Multiple Providers
• How Context API helped redux and router
• Redux vs Context API
• Testing
All about Context API
2
App
BasketIcon
App
BasketIcon
basketCount
Awesome Store
App
Header
BasketIcon
basketCount
App
Header
BasketIcon
basketCount
basketCount
App
Header
BasketIcon
Prop Drilling
basketCount
basketCount
Awesome Store
ADD ADD ADD
App
Header
BasketIcon
basketCount
basketCount
ProductPage
Product
addToBasket(“mango”);
addToBasket(“mango”);
basketCount + 1
Ways to pass data between components
• setState() Prop drilling
• Global variable
• Singleton
• Context API
• State management tools (Redux, MobX,…)
What is Context API
• State Management
• Avoids prop drilling
• Part of React v16.3
API
const {Provider, Consumer} = React.createContext(defaultValue);
All about Context API
All about Context API
All about Context API
All about Context API
All about Context API
All about Context API
Awesome Store
How to update state stored in Context?
Awesome Store
ADD ADD ADD
All about Context API
All about Context API
…better way
All about Context API
When not to use…
Passing common data
• Theme
• Authorization info
• Locale (I18n)
Using HOC to reuse Consumer logic
Using HOC to reuse Consumer logic
Multiple Providers
• How to wrap a component with multiple Providers
• react-compose
Multiple Providers
Multiple Providers
Multiple Providers
How Context API helped Redux and Router
• Redux
• MobX
• Router
All about Context API
All about Context API
All about Context API
Redux vs Context API
• Does it mean that redux will be useless
• For smaller state management
• Redux Devtools
• Centralized Application logic
Testing
• HOC helps in Testing Context API
Thanks
@souvikbasu

More Related Content

PDF
React Context API
PDF
A GitOps Kubernetes Native CICD Solution with Argo Events, Workflows, and CD
PPTX
Android jetpack compose | Declarative UI
PPT
The Kotlin Programming Language
PDF
Gitlab, GitOps & ArgoCD
PPTX
Typescript Fundamentals
PDF
Angular - Chapter 3 - Components
PDF
Intro to react native
React Context API
A GitOps Kubernetes Native CICD Solution with Argo Events, Workflows, and CD
Android jetpack compose | Declarative UI
The Kotlin Programming Language
Gitlab, GitOps & ArgoCD
Typescript Fundamentals
Angular - Chapter 3 - Components
Intro to react native

What's hot (20)

PPTX
Typescript in 30mins
PDF
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
PDF
React js
PDF
Important React Hooks
PPTX
Jetpack Compose - Android’s modern toolkit for building native UI
PPTX
ReactJS presentation.pptx
PPTX
Clean Code II - Dependency Injection
PDF
What is Jenkins | Jenkins Tutorial for Beginners | Edureka
PDF
Clean Architecture
PPTX
Git Tutorial For Beginners | What is Git and GitHub? | DevOps Tools | DevOps ...
PPTX
Introduction git
PDF
Why we chose Argo Workflow to scale DevOps at InVision
PDF
Try Jetpack Compose
PPTX
The Clean Architecture
PDF
Introduzione ad angular 7/8
PDF
Devops Porto - CI/CD at Gitlab
PPTX
Intro to React
PPTX
Terraform
PDF
Clean Architecture
PDF
Power-up services with gRPC
Typescript in 30mins
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
React js
Important React Hooks
Jetpack Compose - Android’s modern toolkit for building native UI
ReactJS presentation.pptx
Clean Code II - Dependency Injection
What is Jenkins | Jenkins Tutorial for Beginners | Edureka
Clean Architecture
Git Tutorial For Beginners | What is Git and GitHub? | DevOps Tools | DevOps ...
Introduction git
Why we chose Argo Workflow to scale DevOps at InVision
Try Jetpack Compose
The Clean Architecture
Introduzione ad angular 7/8
Devops Porto - CI/CD at Gitlab
Intro to React
Terraform
Clean Architecture
Power-up services with gRPC
Ad

Similar to All about Context API (20)

PPTX
what is context API and How it works in React.pptx
PDF
Context API in React
PDF
Redux and context api with react native app introduction, use cases, implemen...
PPTX
How To Utilize Context API With Class And Functional Componen in React.pptx
PPTX
Managing state in modern React web applications
PDF
Handling State in React: Context API vs. Redux
PDF
Handling Large-Scale State-Management with React Context and Hooks
PDF
We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks
PDF
Workshop State-management in React with Context and Hooks
PDF
React App State Management with react hooks and context api
PDF
A React Journey
KEY
Why are APIs important?
PDF
Materi Modern React Redux Power Point.pdf
PDF
API Technical Writing
PPTX
FRONTEND BOOTCAMP 4.pptx
PPTX
ProvJS: Six Months of ReactJS and Redux
PPTX
STATE MANAGEMENT IN REACT [Autosaved].pptx
PDF
React HOCs, Context and Observables
PDF
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...
PDF
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...
what is context API and How it works in React.pptx
Context API in React
Redux and context api with react native app introduction, use cases, implemen...
How To Utilize Context API With Class And Functional Componen in React.pptx
Managing state in modern React web applications
Handling State in React: Context API vs. Redux
Handling Large-Scale State-Management with React Context and Hooks
We Are Developers - Modern React (Suspense, Context, Hooks) - Roy Derks
Workshop State-management in React with Context and Hooks
React App State Management with react hooks and context api
A React Journey
Why are APIs important?
Materi Modern React Redux Power Point.pdf
API Technical Writing
FRONTEND BOOTCAMP 4.pptx
ProvJS: Six Months of ReactJS and Redux
STATE MANAGEMENT IN REACT [Autosaved].pptx
React HOCs, Context and Observables
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...
Ad

Recently uploaded (20)

PDF
Approach and Philosophy of On baking technology
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PPTX
1. Introduction to Computer Programming.pptx
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
PDF
Machine learning based COVID-19 study performance prediction
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
OMC Textile Division Presentation 2021.pptx
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
August Patch Tuesday
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Tartificialntelligence_presentation.pptx
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
TLE Review Electricity (Electricity).pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
Approach and Philosophy of On baking technology
Univ-Connecticut-ChatGPT-Presentaion.pdf
1. Introduction to Computer Programming.pptx
Accuracy of neural networks in brain wave diagnosis of schizophrenia
Machine learning based COVID-19 study performance prediction
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Digital-Transformation-Roadmap-for-Companies.pptx
OMC Textile Division Presentation 2021.pptx
Group 1 Presentation -Planning and Decision Making .pptx
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Programs and apps: productivity, graphics, security and other tools
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
August Patch Tuesday
Unlocking AI with Model Context Protocol (MCP)
Diabetes mellitus diagnosis method based random forest with bat algorithm
Tartificialntelligence_presentation.pptx
gpt5_lecture_notes_comprehensive_20250812015547.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
TLE Review Electricity (Electricity).pptx
Advanced methodologies resolving dimensionality complications for autism neur...

All about Context API