javascript - What is the right way to use new React hook useContext? - Stack Overflow

admin管理员组

文章数量:1344973

I have some difficulties to understand the new way to use react Context API. I have an app with a custom class Firebase. Now I want to make a hook to pass it. Before I used HOC (higher-order Component) and context.

My questions

1. Do I need to use HOC or it's a new way to do this?
2. Do I need the Context.Provider or it's new Hook?
3. Do I need to declare default value as a null or I can pass my Object right from context.js
4. How can I use a new Hook instead of HOC in mine code?

Here is my code with some ments related to questions

// context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './ponents/Firebase'

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => (props) => {
  // I don't need to wrap it to the FirebaseContext.Consumer
  // 1 But do I need this HOC or it's a new way?
  const firebase = useContext(FirebaseContext)
  return <Component {...props} firebase={firebase} />
}

ReactDOM.render(
  // 2 Here I'm lost. Do I need the FirebaseContext.Provider or not?
  // 3 Do I need to declare value her or I should do it in context.js as a default?
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

// App.jsx
// 4 Can I use a new Hook instead of HOC here and how?
import { withFirebase } from './ponents/Firebase/context'
const App = () => {
    const firebase = this.props.firebase // But should be useContext(FirebaseContext) or something like this?
    return(...)
}
export default withFirebase(App) // I don't need this with the Hook

Any help appreciated.

I have some difficulties to understand the new way to use react Context API. I have an app with a custom class Firebase. Now I want to make a hook to pass it. Before I used HOC (higher-order Component) and context.

My questions

1. Do I need to use HOC or it's a new way to do this?
2. Do I need the Context.Provider or it's new Hook?
3. Do I need to declare default value as a null or I can pass my Object right from context.js
4. How can I use a new Hook instead of HOC in mine code?

Here is my code with some ments related to questions

// context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './ponents/Firebase'

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => (props) => {
  // I don't need to wrap it to the FirebaseContext.Consumer
  // 1 But do I need this HOC or it's a new way?
  const firebase = useContext(FirebaseContext)
  return <Component {...props} firebase={firebase} />
}

ReactDOM.render(
  // 2 Here I'm lost. Do I need the FirebaseContext.Provider or not?
  // 3 Do I need to declare value her or I should do it in context.js as a default?
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

// App.jsx
// 4 Can I use a new Hook instead of HOC here and how?
import { withFirebase } from './ponents/Firebase/context'
const App = () => {
    const firebase = this.props.firebase // But should be useContext(FirebaseContext) or something like this?
    return(...)
}
export default withFirebase(App) // I don't need this with the Hook

Any help appreciated.

• javascript
• reactjs
• react-hooks
• react-context

Share Improve this question Follow edited Aug 25, 2019 at 6:27 Sanjeev 4,37533 gold badges3030 silver badges3737 bronze badges asked Feb 19, 2019 at 4:14 victor zadorozhnyyvictor zadorozhnyy 96911 gold badge1313 silver badges2727 bronze badges 6

• Stack overflow is not a tutorial website. I remend setting up a new question for each of your questions. Make some attempt to solve the problem and if you get stuck we can help. – Josh Pittman Commented Feb 19, 2019 at 4:36
• It looks like you want a beginners introduction to using the context hook, for which I would remend Dave Ceddia's https://daveceddia./usecontext-hook/ – Josh Pittman Commented Feb 19, 2019 at 4:37
• useContext is just an alternative to Context.Consumer or myClass.contextType. Use the variable and pass the context reference into it as default. – Keno Commented Feb 19, 2019 at 4:41
• @JoshPittman I've seen this tutorial (and few more) but still have these questions. I think it's nice to put all together because I use context as I described (it works) and want to show where I'm not sure how to use it. – victor zadorozhnyy Commented Feb 19, 2019 at 4:46
• @KenoClayton that's clear for me. but do I need to wrap the App to Provider? – victor zadorozhnyy Commented Feb 19, 2019 at 4:48

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 8

You should understand it first that, useContext is just to make use of Context and acts like a consumer and not Provider.

To answer your questions

Do I need to use HOC or it's a new way to do this?

You don't need an HOC with hooks. Hooks are meant to replace HOCs and render props pattern.

Do I need the Context.Provider or it's new Hook?

There is no hooks equivalent of Context.Provider. You have to use it as is.

Do I need to declare default value as a null or I can pass my Object right from context.js

The default value to createContext is only used if you don't pass a value props to the Context.Provider. If you pass it the default value is ignored.

How can I use a new Hook instead of HOC in mine code?

Instead of using useContext in the ponent returned by HOC use it directly within the ponent

Sample code

/ context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './ponents/Firebase'

const FirebaseContext = React.createContext(null)

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

App.jsx

const App = () => {
    const firebase = useContext(FirebaseContext) 
    return(...)
}
export default App;

1. Do I need to use HOC or it's a new way to do this?

No, you don't need to use HOC as best technique.

Why? Starting from React v7.0, you can use functional-based ponents. From this version efficient is to use the the latest technique named HOOKS, which were designed to replace class and provide another great alternative to pose behavior into your ponents.

---

2. Do I need the Context.Provider or it's new Hook?

Hook like useContext() has a relation with Context.Provider.
Context is designed to share data that can be considered “global”.

The Provider ponent accepts a value prop to be passed. Every Context e with a Provider.

Context.Provider ponent available on the context instance is used to provide the context to its child ponents, no matter how deep they are.

---

3. Do I need to declare default value as a null or I can pass my Object right from context.js?

No, you don't need necessarily to declare a default value.

Example of defining the context in one corner of the codebase without defaultValue.

const CountStateContext = React.createContext() // <-- define the context without defaultValue

---

4. How can I use a new Hook instead of HOC in mine code?

index.jsx

import App from './App'

import Firebase, { FirebaseContext } from './ponents/Firebase'

const FirebaseContext = React.createContext(null)

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

Root Component: App.js, where will be used data es form context:

const App = () => {
    const firebase = useContext(FirebaseContext) 
    return(...)
}
export default App;

import About from './About'
import React, { createContext, useContext, useState } from 'react'
import {colorThem} from '../App'

const listData =createContext()

const Home = () => {
    const [list , seTList]=useState([1,2,3,4,5,6,7,8,9])
    const data = useContext(colorThem)
  return (
    <div>
        <h1>I'm From Home {data}</h1>
        <listData.Provider value={list}>
        <About/>
        </listData.Provider>
    </div>
  )
}

export default Home
export {listData}


 import { useContext } from "react"
 import { listData } from "./Home"

const About = () => {
const arr = useContext(listData)
 console.log(arr)
  return (
    <div>
      <h1>About ponents </h1>
    {
        arr.map((item ,index)=><h1 key={index}>{item}</h1>)
    }
    </div>
  )
}

export default About

Here is the tested code for useContext, In this example I am updating the form data and rendering the form data in different ponent.

import React, {createContext, useReducer, useContext} from 'react';

// CREATING THE CONTEXT
const userContext = createContext(null);

// REDUCER FUNCTION FOR UPDATING THE CONTEXT
const reducerFn = (state = [], payload) => {
    switch (payload.type) {
        case 'FIRST_NAME':
            return {...state, formData: {firstName: payload.payload, lastName: state.formData.lastName}}
        case 'LAST_NAME':
            return {...state, formData: {firstName: state.formData.firstName, lastName: payload.payload}}
    
        default:
            return {...state};
    }
}

// CONTEXT PROVIDER COMPONENT TO PASS THE CONTEXT VALUE 
const AppContextProvider = ({children}) => {
    const [state, dispatch] = useReducer(reducerFn, {formData: {firstName: '', lastName: ''}});
    return(
        <userContext.Provider value={{state, dispatch}}>
            {children}
        </userContext.Provider>
    )
}

// ACTION CREATION 
const updateFname = (val) => {
    return {
        type: 'FIRST_NAME',
        payload: val
    }
}

const updateLname = (val) => {
    return {
        type: 'LAST_NAME',
        payload: val
    }
}
// ACTION CREATION 



// FORM COMPONENT AND UPDATING THE FORMDATA USING CONTEXT
const UserForm = () => {
    const {state, dispatch} = useContext(userContext)
    return (
        <>
            <div>
                <label htmlFor='fname'>First Name</label>
                <input type='text' id='fname' onChange={(e) => dispatch(updateFname(e.target.value))}/>
            </div>
            <div>
                <label htmlFor='lname'>Last Name</label>
                <input type='text' id='lname' onChange={(e) => dispatch(updateLname(e.target.value))}/>
            </div>
            
        </>
    )
}

// COMPONENT FOR DISPLAYING THE FORMDATA
const DisplayFormData = () => {
    const {state, dispatch} = useContext(userContext);
    return(
        <div>
            <p>First Name is : {state.formData.firstName} and last Name is {state.formData.lastName}</p>
        </div>
    )
}

// MAIN COMPONENT
function Question3Context(props) {
    return (
        <div>
            <AppContextProvider>
                <UserForm />
                <DisplayFormData />
            </AppContextProvider>
        </div>
    );
}

export default Question3Context;

本文标签： javascriptWhat is the right way to use new React hook useContextStack Overflow