What is the right way to use new React hook useContext?

Question

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 comments related to questions

// context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './components/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 './components/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.

Answer 1

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 component returned by HOC use it directly within the component

Sample code

/ context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './components/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;