React Context API - Complete Guide

#javascript #react #contextapi

Watch the video till the end so you will have a clear idea of why to avoid using Context API whenever possible.

In this video, you will learn why and how to use React Context API in the correct way.

Following things you need to remember before choosing React Context API.

✅ Don't use Context API just to avoid passing props at one of two level deep

✅ Don't wrap Context for your entire App as it will cause performance issue

✅ Use Context API only when you want to pass data to a component nested deep in the component tree or you want to change data across your entire app like changing a theme

✅ Passing props to components is not a bad idea so whenever possible avoid using Context API and use props to avoid performance issues

✅ Create a custom hook to wrap the useContext hook to avoid extra imports and better debugging

✅ Always create ContextProvider component which accepts children prop and returns Provider from that component by wrapping children inside it to avoid re-rendering of all the child components 

Check out the video to learn all the above points in detail.

Timestamps ⏰

00:00 - Why to Use Context API
03:00 - How to Use Context API
10:00 - Implementing Light And Dark Theme
23:40 - Creating Custom Hook For Context
31:17 - Don't Skip This Part - Very Important

--------------------------------------------------

Learn React - 3 Hours Masterclass: https://courses.yogeshchavan.dev/lear...

--------------------------------------------------

Initial Source Code: https://github.com/myogeshchavan97/re...

Complete GitHub Source Code: https://github.com/myogeshchavan97/re...

--------------------------------------------------

React Router 6 Video Course: https://courses.yogeshchavan.dev/reac...

Learn Webpack For Production Playlist:    • Learn Webpack For Production - Part 1  

Redux Toolkit Crash Course Playlist:    • Redux Toolkit - 1  

Tags 🔖

React | JavaScript | React | React Hooks | React Context API

My Courses: https://courses.yogeshchavan.dev/
My Blog: https://blog.yogeshchavan.dev/
LinkedIn:   / yogesh-ch.  .
Twitter:   / myogeshchavan97  
GitHub: https://github.com/myogeshchavan97/

Do subscribe to the channel and press the bell icon to receive all future notifications.