10+ Usecontext 使い方 Article

Managing State with React Context API and useContext Hook by Alex from medium.com

Introduction

If you're a beginner in React, you might have heard of the term "UseContext". UseContext is a feature in React that allows you to share data between components without having to pass props down the whole component tree. In this article, we will discuss the basics of UseContext and how you can use it in your React applications.

What is UseContext?

UseContext is a built-in hook in React that allows you to access data from a parent component in a child component. It is used for passing down data that is needed by multiple components in a component tree. By using UseContext, you can avoid the need to pass props down to every single component that needs the data.

How to Use UseContext

To use UseContext, you need to create a context in the parent component. This context will hold the data that you want to pass down to the child components. You can create a context using the createContext() method.

Here's an example:

```javascript import React, { createContext, useState } from 'react'; export const MyContext = createContext(); const ParentComponent = () => { const [data, setData] = useState('Hello world!'); return ( ); }; ```

In this example, we created a context called "MyContext" and passed down the "data" state and "setData" function as values. We then wrapped the "ChildComponent" inside the "MyContext.Provider" component and passed down the context as a value.

Consuming the Context in Child Components

To consume the context in a child component, you need to use the useContext() hook. This hook takes the context as an argument and returns the value of the context.

Here's an example:

```javascript import React, { useContext } from 'react'; import { MyContext } from './ParentComponent'; const ChildComponent = () => { const { data, setData } = useContext(MyContext); return (

{data}

); }; ```

In this example, we imported the "MyContext" context from the parent component and used the useContext() hook to access the "data" state and "setData" function. We then rendered the "data" state in a paragraph tag and added a button that changes the "data" state when clicked.

Conclusion

UseContext is a powerful feature in React that allows you to share data between components without having to pass props down the whole component tree. By using UseContext, you can make your code more efficient and easier to read. We hope this beginner's guide has helped you understand the basics of UseContext and how to use it in your React applications.