The reason React has contexts is to allow for multiple sibling ponents to share a piece of state-data. It is the go-to method for allowing two unrelated ponents to read/write in shared variables. The reason it is necessary is that React has no way to easily source a data value to multiple screens without actually passing that data between screens. Instead, it allows each screen access to the data when it needs it.

So... The implementation requires that a ponent be created, called a Context.Provider ponent, and then you have to wrap the ponents who need access to the shared data inside the Context.Provider. But why? Why on earth is that a requirement? Contexts are designed sharing data between ponents who aren't hierarchally related, and were required to put the ponents within a heirarchy to do so?

It would be 100 times more straight forward and just as effective to simply drop the requirement of using a Context.Provider, simple have the useContext function give access to a set variable by default:

// In ctx.js
import React from 'react';
export default CTX = React.createContext({val: "value"});

// In pA.js
import CTX from './ctx.js';
import {useContext} from 'react';
function A(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'value'};
    setContext({val: "newValue"});
}

Then later on, assuming ponent B renders after A:

import CTX from './ctx.js';
import {useContext} from 'react';
function B(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'newValue'};
}

The above usage, if it actually worked, solves the task of "sharing data between unrelated ponents", and is much much simpler than requiring an entire new ponent be defined in the context file. This solution is better because: 1. No required restructuring of the application. You don't need to wrap ponents in a provider. 2. Any Components can just ask for any shared state easily, and they can set the shared state easily. 3. Easier to understand with much less code involved (One line of code for import and one line to initiate the context). 4. Doesn't sacrifice anything. This method allows for easy sharing of state between ponents, which is the entire reason of contexts in the first place.

Am I crazy? Is there a legitamate reason that we'd absolutely need to wrap our ponents up in a special ponent to share data?.. Why can't the shared state just exist independently? Its like they chose a bad solution... Why make every developer wrap there ponents in another ponent before using shared state, why not just let the developer use the damned shared state when they need to use it instead of jumping through a hoop? Someone please educate me.

Edit: One answer said that with my described method we wouldn't be able to access multiple contexts with a single ponent. That is false. It is actually easier with my described method:

// In context.js
export const CTX = React.createContext({val: "val"});
export const CTX2 = React.createContext({val2: "val2"});

// In app.js

function App(props) {
    const [state, setState] = useContext(CTX);
    const [state2, setState2] = userContext(CTX2);
    return (<></>);
}

Easy. No need for Context.Provider. This is multiple contexts being used in one ponent, requiring just two calls to useContext versus wrapping your entire application in two nested contexts, which is what is what you have to do with current Context.Provider method...

// In ctx.js
import React from 'react';
export default CTX = React.createContext({val: "value"});

// In pA.js
import CTX from './ctx.js';
import {useContext} from 'react';
function A(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'value'};
    setContext({val: "newValue"});
}

Then later on, assuming ponent B renders after A:

import CTX from './ctx.js';
import {useContext} from 'react';
function B(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'newValue'};
}

Edit: One answer said that with my described method we wouldn't be able to access multiple contexts with a single ponent. That is false. It is actually easier with my described method:

// In context.js
export const CTX = React.createContext({val: "val"});
export const CTX2 = React.createContext({val2: "val2"});

// In app.js

function App(props) {
    const [state, setState] = useContext(CTX);
    const [state2, setState2] = userContext(CTX2);
    return (<></>);
}

Share Improve this question edited Nov 25, 2019 at 21:42 asked Nov 23, 2019 at 21:27 ICW 5,8066 gold badges31 silver badges38 bronze badges

3 Well, who cares. It's the specification, maybe old. Could bad design an answer to your question? – Thanh Trung Commented Nov 23, 2019 at 21:43
1 I can't answer your question, I wish the React hype will be over, like the Bitcoin hype. – Sang Dang Commented Nov 23, 2019 at 21:45
Just speculating: I think React's main design philosophies are simplicity by making context useful in various situations and explicitness by forcing you to always have a provider. Yes, there could be shorter versions, but does shorter mean better? – Jonas Wilms Commented Nov 23, 2019 at 23:52
1 @ThanhTrung Yes it would! haha – ICW Commented Nov 25, 2019 at 21:35
1 1. multiple providers. 2. scope. I can't summarize it more than that. – Dennis Vash Commented Nov 25, 2019 at 21:45

| Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

Mate, answer is simple. React ponent only re-renders when it's props or state changes. Without Context.Provider ponent react will never understand when to re-render child ponents, thus you will have stale, render-blocked ponents.

The purpose for having a Context Provider wrap around children is to keep track of state and props, read on how state and props between parents and children affect each other. If there was no way for the Context Provider to keep track of its children, how would the ponents that use the Context be able to update(Changing parent state affects children, so there may be rerendering).

It's also important to understand React's philosophy and it's focus on ponents, it is a ponent-based library after all.

Important thing to remember: Parent state change will affect children, so if state changes in parent, children ponents will be reevaluated and depending on how your ponents, state, and data are optimized (memo, callback, etc.) a rerender may occur, thus updating those children ponents as well.

Contexts Are Made To Handle All Use Cases

I've since spent more time using Contexts in my applications and have e to realize that Context.Provider is quite useful in a variety of situations. My initial plaint has merit in that often times when using Context we are simply wanting a variant of state that can be shared between ponents. In this mon use case, Context.Provider does indeed requires us to write a bit of unnecessary boilerplate code and requires us to wrap elements in the provider so that they have access to the context.

However any time our shared state bees a little more plicated having a dedicated Context.Provider ponent can make our lives a lot easier. Here is a use case to consider

Shared Data From External Sources (Post, Get)

Contexts may allow us to store any code related to the initialization of the shared state within the context itself, resulting in more easily readable and maintainable code. For example, lets say we have some user text posts on our server that are displayed by multiple ponents within our application, and we would also like for our users to be able to add new posts. All of this can be handled quite neatly within the Context.Provider:

import React, {useContext, useEffect, useState} from 'react';
export const PostsContext = React.createContext([]);

export default PostsContextProvider({children}) {
    const [posts, setPosts] = useState([]);
    
    function fetchPosts() {
        // Here we will fetch the posts from our API, and then set the state
        // stored within the Context.Provider equal to the fetched posts.
        fetch('https://www.fakewebsite./api/posts/get', {
            method: 'GET',
            headers: {'Content-Type': 'application/json'}
        }).then((response)=>{
            // Convert response to json
            return response.json();
        }).then((json)=>{
            // json here is the posts we fetched from the server, so we set the state
            // equal to this value. This will update the state within all ponents
            // that are using the context.
            setPosts(json.posts);
        })
    }

    useEffect(function(){
        // This function will run a single time when the application is started
        fetchPosts();
    },[])

    function addNewPost(post) {
        // This is the function that will be used by the ponents.
        // First, we will send the new post to the server so that it can store it.
        fetch('https://www.fakewebsite./api/posts/post', {
            method: "POST",
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({post: post})
        }).then((response)=>{
            if(response.ok) {
                // The server has updated its database with our new post.
                // Now we just need to fetch the posts from the server again to get the updated data.
                fetchPosts();
            } 
        })
    }
    return (
        <PostsContext.Provider
            value={[posts, addNewPost]}
        >
            {children}
        <PostsContext.Provider />
    )
}

Notice that the value prop we are passing does not actually pass the state setter function directly. Instead, we pass the addNewPost function. So, when a ponent calls useContext(PostsContext) they will get the addNewPost function. This is extremely useful, it will allow our ponents to easily add a single post to the shared state, while also handling the server update! Very cool. With the solution I originally proposed, this would be impossible, because we would only ever get a simple state setting function from our useContext call.

Now, we must wrap our application in the provider to make it available to all ponents:

// App.js

import React from 'react';
import PostsContextProvider from './posts_context';
import MyComponent from './my_ponent';
import MyOtherComponent from './my_other_ponent';

export default function App() {
    return (
        <PostsContextProvider>
            <MyComponent/>
            <MyOtherComponent/>
        </PostsContextProvider>
    )
}

At this point, MyComponent and MyOtherComponent now have access to the context using the useContext hook. It is now extremely simple for the ponents to access the posts data and also update it with a new post.

import React, {useContext} from 'react';
import {PostContext} from './posts_context';
export default function MyComponent() {
    const [posts, addPost] = useContext(PostsContext); // 'posts' will always be up to date with the latest data thanks to the context.
    
    ...
}

import React, {useContext} from 'react';
import {PostContext} from './posts_context';
export default function MyOtherComponent() {
    const [posts, addPost] = useContext(PostsContext); 
    
    ...
    function handleAddPost(title, text) {
        // Now when this ponent wants to add a new post, 
        // we just use the `addPost` function from the context.
        addPost({title, text});
    }
    ...
}

The beauty of this is that all the code related to the fetching and posting of data can be neatly contained within the provider, separated from the UI code. Each ponent has easy access to the posts data, and when either ponent adds a new post the other ponent will be updated with the new data.

Final Thoughts

This is just scratching the surface of the usefulness of Context.Provider. It's easy to imagine using a Context.Provider to handle persistent data storage using a method very similar to the above, replacing the fetch calls with function that store/fetch persistent data. Or even, some bination of persistent data and fetched data.

Upon revisiting my original question, it actually made me laugh. I was sort of right, there should perhaps be a way to handle simple shared state between ponents that does not require wrapping ponents in a provider and does not require any provider code at all. However, providers are just so dang useful in any kind of state management within an application that it is actually probably a good thing to force people to use them for simple shared state, because then they will have to learn about this wonderful tool.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why Is React Context.Provider Necessary (Or useful)? - Stack Overflow

3 Answers 3

Contexts Are Made To Handle All Use Cases

Shared Data From External Sources (Post, Get)

Final Thoughts

与本文相关的文章

评论列表(0)