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
Context API in React
PDF
React Context API
PDF
Java spring framework
PPTX
React workshop
PDF
iOS Modular Architecture with Tuist
PPTX
Angular 9
PDF
Spring Framework - Core
PPTX
Spring data jpa
Context API in React
React Context API
Java spring framework
React workshop
iOS Modular Architecture with Tuist
Angular 9
Spring Framework - Core
Spring data jpa

What's hot (20)

PDF
TypeScript and Angular workshop
PPTX
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
PPT
React js
PDF
Introduction to Spring Framework
PDF
Evolution of containers to kubernetes
PDF
Building blocks of Angular
PDF
Netflix conductor
PDF
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개
PPTX
Java Spring Framework
PPTX
Android jetpack compose | Declarative UI
PDF
Why Vue.js?
PPTX
Spring Boot
PDF
숨겨진 마이크로서비스: 초고속 응답과 고가용성을 위한 캐시 서비스 디자인
PPTX
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
PPTX
The Clean Architecture
PPTX
SpringBoot with MyBatis, Flyway, QueryDSL
PDF
Microservices with Java, Spring Boot and Spring Cloud
PDF
Introduction to kubernetes
PPTX
React hooks
PPTX
IBM JVM 소개 - Oracle JVM 과 비교
TypeScript and Angular workshop
Java Spring framework, Dependency Injection, DI, IoC, Inversion of Control
React js
Introduction to Spring Framework
Evolution of containers to kubernetes
Building blocks of Angular
Netflix conductor
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개
Java Spring Framework
Android jetpack compose | Declarative UI
Why Vue.js?
Spring Boot
숨겨진 마이크로서비스: 초고속 응답과 고가용성을 위한 캐시 서비스 디자인
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
The Clean Architecture
SpringBoot with MyBatis, Flyway, QueryDSL
Microservices with Java, Spring Boot and Spring Cloud
Introduction to kubernetes
React hooks
IBM JVM 소개 - Oracle JVM 과 비교
Ad

Similar to All about Context API (20)

PPTX
what is context API and How it works in React.pptx
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) ...
PDF
APIdays Zurich 2019 - Digital Ecosystems, fueled by APIs Matthias Biehl, API ...
what is context API and How it works in React.pptx
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) ...
APIdays Zurich 2019 - Digital Ecosystems, fueled by APIs Matthias Biehl, API ...
Ad

Recently uploaded (20)

PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
Cloud computing and distributed systems.
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Approach and Philosophy of On baking technology
PDF
Modernizing your data center with Dell and AMD
PPTX
Big Data Technologies - Introduction.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
NewMind AI Monthly Chronicles - July 2025
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PPTX
A Presentation on Artificial Intelligence
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Electronic commerce courselecture one. Pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Encapsulation theory and applications.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Cloud computing and distributed systems.
Review of recent advances in non-invasive hemoglobin estimation
Approach and Philosophy of On baking technology
Modernizing your data center with Dell and AMD
Big Data Technologies - Introduction.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Spectral efficient network and resource selection model in 5G networks
NewMind AI Monthly Chronicles - July 2025
Understanding_Digital_Forensics_Presentation.pptx
A Presentation on Artificial Intelligence
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Electronic commerce courselecture one. Pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Digital-Transformation-Roadmap-for-Companies.pptx
Chapter 3 Spatial Domain Image Processing.pdf
Encapsulation theory and applications.pdf

All about Context API