Search code examples
javascriptreactjsreact-hooksreact-context

(React.js) Nested useContext (global > small components)

I wonder what problem could occur by nesting useContext?

for example, I have these files

app.js
  -components
    -BookLists.js
    -BookReview.js
    -Comments.js
  -pages
    -Main.js
    -Viewer.js
    -Auth.js
app.js

And I need context provider globally and individually for the smaller components

such as

<context.Provider>
   <Main />
</context.Provider>

<scrollerHistory.Provider>
  <BookList />
</scrollerHistory.Provider>
Solution

  • React Context API provides consuming multiple contexts. Check the following for more detail.

    https://reactjs.org/docs/context.html#consuming-multiple-contexts

    React multiple contexts