youtube pr is topic pe kam se kam 30 minutes ki long videos banaai he logon ne magar Harry bhai ne 15 minute mein un se bhi acha samjha diya. Lovo from Pakistan
one of my friend said if you really focus on yourself you will find that there is not much of competition and also after seeing the views difference in all of your vedio i think i definately get what he was actually saying
🎯 Key Takeaways for quick navigation: 00:00 *🎥 Introduction to the useContext hook in React* - The video introduces the useContext hook in React. 00:20 *🔧 Using Context API in React* - Context API allows passing data through the component tree without having to pass props down manually at every level. 01:01 *🔄 Prop drilling in React* - Prop drilling refers to the process where props are passed from a component to its descendants down the component tree, even if intermediate components do not use the props. 01:56 *🎯 Advantages of using useContext hook* - The useContext hook provides an easier way to access state across deeply nested components, avoiding prop drilling. 02:23 *🚀 Practical demonstration of useContext in React* - A practical demonstration showing how to use the useContext hook in a real React application. 03:07 *🛠️ Creating Components in React* - Demonstrates creating components in React. - Includes creating a component folder, adding components like Button and Navbar, and organizing the components. 04:00 *🧩 Organizing Components with React Fragment* - Uses React Fragment to organize components. - Demonstrates importing and using a Button component inside another component. 05:07 *📦 Creating and Using External Components* - Shows how to create an external component file. - Imports and uses the external component (Button) in another component. 06:32 *🔄 Understanding the useContext hook in React* - Explanation of how to use the useContext hook in React. - Demonstrates how to pass and access props using useContext. - Shows how to use destructuring to simplify accessing props. 07:12 *🔄 Implementing useContext in React components* - Demonstrates how to implement useContext in multiple components. - Shows how to access and display the context value. - Explains how to refactor code to use useContext instead of passing props manually. 07:54 *🔄 Refactoring code to use useContext* - Shows the process of refactoring code to use useContext instead of props drilling. - Highlights the benefits of using useContext for cleaner code. - Explains how to organize code in folders and files for better structure. 09:15 *📁 Context API Folder Structure* - Creating a folder called "Context" for organizing context-related files. - Avoiding confusion by keeping context-related files separate from other files. 09:58 *🔄 Using Context in Components* - Creating a context folder with files for each context, e.g., "counter.js". - Importing the context in the main app.js file and using it. 11:08 *🔗 Context Provider Usage* - Using the context provider to wrap the entire app in app.js. - Achieving a nested component structure where all components receive the context value. 12:18 *🔄 Using the useContext hook in React* - Demonstrates how to use the useContext hook in React to access context values in nested components. 13:38 *🖱️ Changing context value with a button click* - Shows how to change a context value by clicking a button, using the useState hook within the context provider. 14:50 *🔄 Updating context value using setState function* - Explains how to update a context value using the setState function, ensuring the value is correctly updated and reflected in the UI. 15:16 *🔄 Updating state in nested components with useContext* - Demonstrates how to update state in nested components using the useContext hook. Made with HARPA AI
Harry bhai its just awesome , First video of react that I understand in one go. Hope u will continue this approach , first explain whole scenario with code and then its solution❤
Humaray yahan Pakistan may bhi kuch Indians key trah key mentality k log hotay hain , jo her achay say achay level k course ko start krnay say bhi pehlay ye puchtay hain , k ye achi job or placement lagwaye ga ya nahi . agar wahin time learning may or practice may lagayein to beast ban jayein is field may . You are a real gem Sir 😍😍😍🥰🥰🥰🥰
Sir now a days I am exploring angular spring boot full stack developement projects where i found these highlighting features 1 razor pay 2 login verification on mail 3 more complex frontend part like links & all 4 windows local storage for saving user credentials in browser Now my doubt is are these versatile range projects inspired by real mnc projects & can Learning it help freshers to develop projects in job ?
It took me 55 mins to complete this video, I learned the shortcut method to open the project in the vs-code itself, without using file explorer, I was coding along, made a short soft note on useContext, passed it using 2 different ways and then the actual concept of useContext hook. I understood all but don't you think 50 mins is way too much time?
Mai aapne jab react app ko run kar raha hu to white screen render ho raha hai .jabki sab code sahi hai aur console me bhi kuchh error nahi pa raha hu.when I run it.and I have done totally approach and also used chatgpt.Bro how to resolve it.any one having any idea .please help me .mere development journey ko slow kar raha hai yar . please tell me how will resolve it.
I'm facing Error: Objects are not valid as a React child (found: object with keys {$$typeof, _currentValue, _currentValue2, _threadCount, Provider, Consumer, _defaultValue, _globalName, _currentRenderer, _currentRenderer2}). If you meant to render a collection of children, use an array instead. can someone help me out with this ?
If you're encountering the "Objects are not valid as a React child" error while using the Context API, it typically means you're trying to render the context value directly, which is an object. Here’s how to address it: Check Context Provider: Ensure that the value you are providing in your context is appropriate (e.g., a string or a number) or properly accessing the properties of the object when consuming the context. Consuming Context: When you consume the context, ensure you're rendering a specific property of the object instead of the whole object. Example: If your context provides an object, access a specific field: Instead of rendering the entire object, render its properties (like value.name). Debugging: Use console logs to inspect the context value and make sure you’re not trying to render the whole object.
Hi bro ❤ Is bar TH-cam clone create Karo With full response like button login screen shot screen upload screen home screen posts screen and response nav bar database run time Like one page to another page Kasi transfer ho gaya ❤❤ #SigmaBatchop
youtube pr is topic pe kam se kam 30 minutes ki long videos banaai he logon ne magar Harry bhai ne 15 minute mein un se bhi acha samjha diya. Lovo from Pakistan
one of my friend said if you really focus on yourself you will find that there is not much of competition and also after seeing the views difference in all of your vedio i think i definately get what he was actually saying
Yes brother
I must comment "Your way of teaching in an easy way with mix language manner is Best"
Keep it up brother !
Best video on Context Hook till now
One video is enough to learn useContext. Great video sir.
🎯 Key Takeaways for quick navigation:
00:00 *🎥 Introduction to the useContext hook in React*
- The video introduces the useContext hook in React.
00:20 *🔧 Using Context API in React*
- Context API allows passing data through the component tree without having to pass props down manually at every level.
01:01 *🔄 Prop drilling in React*
- Prop drilling refers to the process where props are passed from a component to its descendants down the component tree, even if intermediate components do not use the props.
01:56 *🎯 Advantages of using useContext hook*
- The useContext hook provides an easier way to access state across deeply nested components, avoiding prop drilling.
02:23 *🚀 Practical demonstration of useContext in React*
- A practical demonstration showing how to use the useContext hook in a real React application.
03:07 *🛠️ Creating Components in React*
- Demonstrates creating components in React.
- Includes creating a component folder, adding components like Button and Navbar, and organizing the components.
04:00 *🧩 Organizing Components with React Fragment*
- Uses React Fragment to organize components.
- Demonstrates importing and using a Button component inside another component.
05:07 *📦 Creating and Using External Components*
- Shows how to create an external component file.
- Imports and uses the external component (Button) in another component.
06:32 *🔄 Understanding the useContext hook in React*
- Explanation of how to use the useContext hook in React.
- Demonstrates how to pass and access props using useContext.
- Shows how to use destructuring to simplify accessing props.
07:12 *🔄 Implementing useContext in React components*
- Demonstrates how to implement useContext in multiple components.
- Shows how to access and display the context value.
- Explains how to refactor code to use useContext instead of passing props manually.
07:54 *🔄 Refactoring code to use useContext*
- Shows the process of refactoring code to use useContext instead of props drilling.
- Highlights the benefits of using useContext for cleaner code.
- Explains how to organize code in folders and files for better structure.
09:15 *📁 Context API Folder Structure*
- Creating a folder called "Context" for organizing context-related files.
- Avoiding confusion by keeping context-related files separate from other files.
09:58 *🔄 Using Context in Components*
- Creating a context folder with files for each context, e.g., "counter.js".
- Importing the context in the main app.js file and using it.
11:08 *🔗 Context Provider Usage*
- Using the context provider to wrap the entire app in app.js.
- Achieving a nested component structure where all components receive the context value.
12:18 *🔄 Using the useContext hook in React*
- Demonstrates how to use the useContext hook in React to access context values in nested components.
13:38 *🖱️ Changing context value with a button click*
- Shows how to change a context value by clicking a button, using the useState hook within the context provider.
14:50 *🔄 Updating context value using setState function*
- Explains how to update a context value using the setState function, ensuring the value is correctly updated and reflected in the UI.
15:16 *🔄 Updating state in nested components with useContext*
- Demonstrates how to update state in nested components using the useContext hook.
Made with HARPA AI
Harry bhai its just awesome ,
First video of react that I understand in one go. Hope u will continue this approach , first explain whole scenario with code and then its solution❤
Let's vote for Data Science course after sigma🔥🎉💪
Agree with u
kya baat hai #Harry_Bhai itna mast tarike se smajha diya, bilkul concept clear ho gaya 🤩🤩🤩
Humaray yahan Pakistan may bhi kuch Indians key trah key mentality k log hotay hain , jo her achay say achay level k course ko start krnay say bhi pehlay ye puchtay hain , k ye achi job or placement lagwaye ga ya nahi . agar wahin time learning may or practice may lagayein to beast ban jayein is field may . You are a real gem Sir 😍😍😍🥰🥰🥰🥰
What do you mean indians ke tarah log ? 🤬
this is the third video i watched on context API , and this was the best
Ab samajh mein aaya context api. Thank you bhaiya ❤❤😊
Salute for your hardworking and consistency ❤
Hi
For those who are in hurry can start the video from 10:00 after understanding the introduction from 00:25 to 2:25 (What is the need of useContext).
Hello Harry Bhai, Love from Gilgit Baltistan, this course is amazing and on video No. 78
loved the video and this topic is released exactly before my exam
thanku bhayya lotof love
What course are u in? Because I want to get a job without degree so I am a little bit anxious can u tell me please
I loved this course and, I Saved 115 all your videos in my laptop. I don't want any type of paid course. #SigmaOp
Pinn my Comment, Big Fan
Love and respect from Pakistan Harry Bhai
Harry bhai ne bola hai time do m samjha dunga toh bs samjha diya
Bhai pe bharosa rakho bs❤🔥
Hamara Teacher Kaisa ho? Harry bhai jaisa ho! ❤
Very easy way for understanding this concept. Great Harry Bhai
best explanation so far
After hitesh and piyush garg,watched your video and now finally im able to understand context api.
thank you harry for clearing the concept
The course is awesome ❤❤
Thanks for the valuable content. Really feeling grateful to you.
Thank you Harry bhai. It is a bit complex for me, but slowly it will become easy. 👍👍
Awesome video 😎 👍
make one video on UseReducer as well
this line :- I WILL SEE YOU NEXT TIME ❤❤
Amazing explanation Harry Bhai ❤
Sir now a days I am exploring angular spring boot full stack developement projects where i found these highlighting features
1 razor pay
2 login verification on mail
3 more complex frontend part like links & all
4 windows local storage for saving user credentials in browser
Now my doubt is are these versatile range projects inspired by real mnc projects & can Learning it help freshers to develop projects in job ?
thanks.. ab acha sa samj a gya ha context ka.❤
very simple explanation of context api , my suggestion for the viewers first watch the video and try by yourself
Harry Bhai We Will Be Teaching you JavaScript react best and your courses is very good and website is good
My first comment sir ko special thank you very much sir🎉🎉🎉🎉🎉
So it's basically global variables that we can use everywhere in our jsx files❤.
React op❤
React OP #harrybhai best youtuber and coding legend 💻
Harry ki Guarantee ✅✅
Helpfull Harry bhai❤
Code with Harry baba kii Jay🙌
Thanks for explaining in such a simple way #HarryBhai
#ReactOp
nice explanation
“Learn as if you will live forever, live like you will die tomorrow.”
Harry bhai keep it up
@Harry Bhai I was using your 4 years old web development playlist..
Front end only..
Kaun sa follow karna hai abb😅
New hi kro vese html or css old course me bhi boht achi ha or same ha.
thank you haris bhai
#CodeWithHarryRocks & #React Batch OP 🤟👍
how explained this better than hitesh sir
sahi kaha yaar
Thank You. For this awesome Video
Thks harry bhai.
There is draw back of usecontext ....it should pass state only in react component ...not in normal function
Sir aapne isme use effect likha hai ye use context aayega❤❤
Sir after this react course please teach us about NextJs also...
mja aagya guru
Love you bhaiya ❤
course is awesome...
thank you. Please add next js
#doubt If we have useContext hook in react then why we use Redux for same operation?
Usecontext wont work for larger global state
It took me 55 mins to complete this video, I learned the shortcut method to open the project in the vs-code itself, without using file explorer, I was coding along, made a short soft note on useContext, passed it using 2 different ways and then the actual concept of useContext hook. I understood all but don't you think 50 mins is way too much time?
If you understood deeply than it's good
well explained
Harry sir also make a video on useReducer hook
Sir, Which chrome theme are you using?
love you bhaiya
Aryy Harry bhai title me useEffet hook aagya, lecture tho useContext ke bare me hain 😅😅
Sigma batch op 🎉🎉
love you harry bhai from iit jodhpur
Thanks ❤️
#SigmaBatchOp
#ReactOp
#Harry sir❤❤
Title Should be "The useContext hook in React | Sigma Web Development Course - Tutorial #116"
Title is incoreect Harry Brother
#reactOp
#best course - sigmawebdevelopmentcourse
Thankyou bhai
React OP
Sigma Batch OP
Harry bhai VS code main knosi Theme use karte ho
Thank you
Hlo harry bhai mai aap ka old web development follow karu ye new sigma wall wed devlopment please bata di confusion hai
Please koi bata do
New
sigma batch op>>>
I Am coming wait for me❤❤
#SIGMABATCHOP 🔥🔥🔥🔥🔥🔥
What is outletcontext
Mai aapne jab react app ko run kar raha hu to white screen render ho raha hai .jabki sab code sahi hai aur console me bhi kuchh error nahi pa raha hu.when I run it.and I have done totally approach and also used chatgpt.Bro how to resolve it.any one having any idea .please help me .mere development journey ko slow kar raha hai yar . please tell me how will resolve it.
Please make videos on redux. It is an important topic for react developers.
Hello SIR. I am from Bangladesh and I am a non CSE student. I have 3 to 4 years to learn coding. So should I start with C and C++?
Starting with java would be more beneficial
Nope if he is learning as a beginner he should start from python or c
1st person , but i already have my own Framework which is like react bu different
I'm facing Error: Objects are not valid as a React child (found: object with keys {$$typeof, _currentValue, _currentValue2, _threadCount, Provider, Consumer, _defaultValue, _globalName, _currentRenderer, _currentRenderer2}). If you meant to render a collection of children, use an array instead.
can someone help me out with this ?
If you're encountering the "Objects are not valid as a React child" error while using the Context API, it typically means you're trying to render the context value directly, which is an object. Here’s how to address it:
Check Context Provider: Ensure that the value you are providing in your context is appropriate (e.g., a string or a number) or properly accessing the properties of the object when consuming the context.
Consuming Context: When you consume the context, ensure you're rendering a specific property of the object instead of the whole object.
Example: If your context provides an object, access a specific field:
Instead of rendering the entire object, render its properties (like value.name).
Debugging: Use console logs to inspect the context value and make sure you’re not trying to render the whole object.
Harry bhaiya how to apply in your company?...pls give us full video on it.
good bhai
Sigma batch OP
React OP
Amazing
SIR , PLEASE AB AK AI PE SERIES BANAVO NA
JORDAR SERIES CHE
SIGMA BATCH OP
React OP❤
Coming for you sooon
Harry bhai love form pakistan
component 1 me jo const counter waly jo line hy us ki smjh nhi ai woh q likho
Hi bro ❤
Is bar TH-cam clone create Karo
With full response like button login screen shot screen upload screen home screen posts screen and response nav bar database run time
Like one page to another page Kasi transfer ho gaya
❤❤
#SigmaBatchop
bhai AI par series banavo ne
#SIGMA_BATCH_OP❤
#JAVASCRIPT_OP
React op💥💥
Nice