useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In this React JS tutorial, the instructor guides beginners through the process of avoiding 'props drilling' by introducing the useContext hook. The video demonstrates creating a React application with a parent and child components, illustrating how to manage state globally using context. It explains the three steps to use context: creating, providing, and consuming it. The tutorial shows how to create a custom provider to pass state through context, eliminating the need for props drilling. The instructor encourages viewers to practice by building an app with a header, main component, and dynamic children components, and provides a link to the solution code in the video description.

Takeaways

• 🎓 This video is part of a 'React JS - Zero to Hero' series aimed at beginners who want to learn React JS from scratch.
• 🔗 The previous video explained communication between components through props and the concept of props drilling.
• 📚 The current video focuses on the useContext hook and its utility in avoiding props drilling.
• 🛠️ The presenter demonstrates how to create a new React application with a parent and child components to illustrate props drilling.
• 🔄 Props drilling is shown where a state change in a grandchild component is managed by updating the state in the parent component and passing it down through props.
• 🌐 React Context is introduced as a way to manage global state and provide data to components at any level in the component tree.
• 📝 Three steps to use context in React are outlined: creating the context, providing the context, and consuming the context.
• 🔑 The useContext hook is used to consume the context, allowing components to access the global state without props drilling.
• 🔧 A custom provider is created to wrap the application's components, enabling the useContext hook to access the global state.
• 🛒 The useContext hook is applied to solve the props drilling problem, allowing state to be updated and accessed globally without passing props through intermediate components.
• 📌 The video concludes with a task for viewers to create an application using useContext to manage a cart update, with solution code available in the video description.

Q & A

What is the main topic of the video?

The main topic of the video is explaining how to use the useContext hook in React JS to avoid props drilling.

What problem does props drilling present in React components?

Props drilling presents a problem where you need to pass props through multiple layers of components even if they are not used by some of them, leading to unnecessary prop passing and making the component structure less efficient.

How does React Context help in managing state globally?

React Context allows you to share values like state between components without having to explicitly pass props through every level of the tree, making it easier to manage global state.

What are the three steps to use context in a React application?

The three steps to use context in a React application are: 1) creating the context using `createContext`, 2) providing the context using a Provider component, and 3) consuming the context using the `useContext` hook.

What is a Provider in the context of React Context?

A Provider in React Context is a component that allows consuming components to subscribe to context changes by wrapping them with the Provider and passing the context value.

Why is it recommended to provide context at the top level of your application?

Providing context at the top level ensures that all child components have access to the context, making it available throughout the application without having to wrap each component individually.

How can you create a custom Provider in React?

You can create a custom Provider by creating a component that accepts props and returns the Provider from the context, allowing you to pass additional props or customize the context value.

What is the benefit of using useContext over passing props?

Using useContext allows you to avoid passing props through multiple components that don't use them, reducing boilerplate code and making the component structure cleaner and more maintainable.

How can you update the state in a context from a child component?

You can update the state in a context from a child component by accessing the state from the context and using a function to update it directly, bypassing the need for callback props.

What task does the video challenge the viewers to create?

The task challenges viewers to create an application with a header component, a main component, and children components, where clicking buttons updates a cart, using useContext to manage state.

Where can the viewers find the solution code for the task mentioned in the video?

The solution code for the task can be found in a repository linked in the video description.

Outlines

00:00

🛠️ Introduction to React's useContext Hook

This paragraph introduces the useContext hook in React, which is aimed at beginners learning React JS from scratch. The instructor discusses the problem of props drilling, where props are passed down through multiple layers of components, even if they are not used by some of them. To demonstrate this, the instructor sets up a React application with a parent component and several child and grandchild components. The communication between these components is initially managed through props and callback functions. The useContext hook is then introduced as a solution to avoid props drilling by allowing state to be shared globally across components without having to pass props through every level. The steps to implement context in a React application are outlined: creating the context, providing the context, and consuming the context. The process involves creating a new context file, using the createContext function, and then wrapping the parent component with the Provider from the created context. The useContext hook is used in the grandchild components to access the shared state.

05:05

🔄 Eliminating Props Drilling with useContext

In this paragraph, the focus is on using the useContext hook to eliminate the need for props drilling. The instructor shows how to directly update the state in the context, bypassing the need to pass props through intermediate components. The grandchild components are updated to consume the state from the context instead of receiving it as props. This change simplifies the component structure by removing unnecessary props and functions. The instructor then tests the application to confirm that it works correctly without props drilling. A task is assigned to the viewers to create an application using useContext to manage state across components, such as updating a cart when buttons are clicked. The solution code is available in a repo linked in the video description. The video concludes with a call to action for viewers to like, subscribe, and support the channel.

Keywords

💡React JS

React JS is a popular open-source JavaScript library for building user interfaces, particularly for single-page applications. It's known for its component-based architecture, which allows developers to build encapsulated components that manage their own state. In the video, the theme revolves around teaching React JS from scratch, indicating that the tutorial is aimed at beginners who are new to this framework.

💡Components

In React, a component is a fundamental building block that represents a part of the user interface. Components allow developers to split the UI into independent, reusable pieces. The script discusses parent, child, and grandchild components, illustrating component hierarchy and communication, which is a core concept in React development.

💡Props

Props, short for properties, are a key feature in React that enable passing data from parent components to child components. The script explains how props are used for communication between components and introduces the problem of 'props drilling', where data is passed through multiple layers of components, which can be cumbersome and inefficient.

💡Props Drilling

Props drilling refers to the practice of passing props through many layers of components, even if some components in the middle do not use the props. This can lead to complex and hard-to-maintain code. The video aims to demonstrate how to avoid this by using the useContext hook, which is a more efficient way to share data across components.

💡useContext Hook

The useContext hook is a React feature that allows components to subscribe to a context object's changes. It's a way to avoid props drilling by providing a way to share values like state across components without having to explicitly pass props through every level of the tree. The video explains how to use useContext to manage and share state globally in a React application.

💡Context

In React, context provides a way to pass data through the component tree without having to pass props down manually at every level. The video script describes the process of creating, providing, and consuming context to manage global state within a React application, which is a key strategy for efficient state management.

💡Provider

A Provider is a React component that allows consuming components to subscribe to context changes. In the script, the Provider is used to wrap a parent component, making the context available to all its descendants. This is a crucial step in setting up context for global state management.

💡State

State in React refers to the data that, when changed, can trigger a component to re-render. The video discusses managing state at a global level using context, which is particularly useful for applications with complex state that needs to be accessed by multiple components.

💡Custom Provider

A custom provider is a component that wraps the built-in context Provider and can accept additional props, which can then be passed to the context. The video script describes creating a custom provider to make the context more flexible and to encapsulate the logic for providing context values.

💡Global State

Global state refers to the state that is accessible across the entire application, regardless of component hierarchy. The useContext hook and context API are used in the video to demonstrate how to manage and share global state, which is a common requirement in large-scale React applications.

💡Event Handler

An event handler is a function that runs in response to user actions, such as clicks or key presses. In the script, an event handler function is used to update the state in the context when a button is clicked, demonstrating how user interactions can trigger state changes that are shared across components.

Highlights

Introduction to React JS Zero to Hero series for beginners.

Explanation of component communication through props.

Discussion on props drilling and its limitations.

Introduction to useContext hook to avoid props drilling.

Creation of a new React application to demonstrate props drilling.

Setup of a parent component with child and grandchild components.

Demonstration of changing a message in a grandchild component through a button click.

Explanation of how to update state in the parent component and pass it down.

Introduction to React Context for global state management.

Three steps to use context in React: create, provide, and consume.

Creating a context using the createContext function.

Providing the context in the App component with a Provider.

Consuming the context in a grandchild component using useContext hook.

Displaying context value in a component.

Adding a new component and accessing context value outside the Provider.

Providing context at the top level in index.js for global access.

Creating a custom Provider to pass context value dynamically.

Updating state in the context directly from a grandchild component.

Removing unnecessary props and functions from intermediate components.

Testing the application to ensure it works without props drilling.

Task for viewers to create an application using useContext to manage a cart.

Providing a solution code repository link for further assistance.

Closing remarks, call to action for likes, subscriptions, and support.

Transcripts

Hi Friends

Welcome back to React JS - Zero to Hero series.

This series is for beginners who wants to learn React JS from Scratch.

In the last video I have explained about how to communicate between components through

props.

Also, I have explained about props drilling.

In this video I am going to explain about useContext hook and how we can use that to

avoid props drilling.

Let's start.

I have created a new react application, in which I have created these components to explain

about props drilling clearly.

I have a parent component, that is what I have configured in the app component and in

this parent component I have two child components, child one component and child two component.

In child one component, I have grand child one component and in child two component,

I have grand child two component.

I have a button in this grand child one component.

When it is clicked, I am changing a message in the grand child two component.

So, to achieve this communication, I am updating the state in the parent component through

callback function which is passed through props.

And then I am passing this state to grand child two component through child two component

using props.

This is props drilling.

You can see, even though the child two component is not using this props, we need to pass it

through this component.

We can avoid this using context.

React Context is a way to manage state globally.

The React context provides data to components no matter how deep they are in the components

tree.

To use context in react, we need to follow 3 steps.

We need to create the context and then we need to provide the context and finally we

need to consume the context.

Ok, lets implement context in our application.

Let me create a new file for context, so that we can reuse throughout our application.

ok.

First step is to create the context.

For that, we can use the built-in function createContext.

Let me import that first.

And then let me create the context.

This is going to give us the context and let me export this so that we can use it in our

application.

And the next step is that we need to provide this.

For that, let me go to the app component and wrap this parent component with the provider

from the context we created.

First we need to import the context here and then wrap this component like this.

We can pass the value which we need to share.

And the final step is to consume the context.

For that we can make use of useContext hook.

I need to use the value in the grand child two component.

So, let me first import the context and also useContext in this component.

And now, I can get the value from the context by passing the context into useContext.

Let me display this here.

And so, we can see this value in this component.

Ok, let me create another component.

And let me add this component in app component inside this context provider.

Now, we can see we are able to get the value here also.

If this component is outside the provider, we cannot access this value in this component.

But in the same time, as grand child two component is one of the descendant of this parent component,

we are able to access this value there.

And so, usually we provide the context in the top most level.

So instead of providing here, let's provide in the index dot js.

Like this.

Now we are able to get the value in all the components.

This is how we can share a value globally.

Hope you understood how context works.

Let's see how we can use this to solve our props drilling problem.

First, let's create a custom provider in our context.

This is going to accept a props and return the provider from the context.

Inside this, we can have props dot children.

We need to export this custom provider so that we can use this throughout our application.

And in index dot js, let me remove this provider and use our custom provider.

And so, whatever we pass here as children will be wrapped by our context provider.

Earlier we hardcoded the value here.

But now, we have the option to pass our value here.

Let me move the state we are maintaining in parent component to here and pass the same

to the value and so we can access this state throughout our application.

Now, let me go to the grand child one component, here we don't need the props and this event

handler function.

Instead let me get the state from the context and let me directly update the state in context

using this function.

Like this.

And in grand child two component, I can get the state from the context and instead of

using the one in props, I can use this state.

Here also I don't need the props anymore.

Even in the intermediate components also, let me remove the props and the unwanted functions.

Now, let me test.

We can see it is working without props drilling.

This is how we can use useContext to maintain the state throughout the application.

Hope you understood.

Let me give you a task.

You can create this application where you can have a header component, a main component

and few children components.

When you click these buttons here, the cart should be updated.

You can try to develop this using useContext.

Try this, if you need the solution code, you can get it from this repo.

The link is also available in the description.

That's all for today.

Please like this video.

Subscribe to my channel and support me.

Thank you.

Bye.