question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] Getting several context values at once?

See original GitHub issue

Hi 👋

First things first, thx a lot for this great work! 👏 I’m still discovering it, and maybe I’m going to ask a silly question but… is there any reason why useContextSelector examples were always using the same “one call, one value” pattern:

const v1 = useContextSelector((ctx) => ctx.v1)
const v2 = useContextSelector((ctx) => ctx.v2)
const v3 = useContextSelector((ctx) => ctx.v3)
...

…which seems quite verbose to me. Couldn’t we simply use a single call such as:

const { v1, v2, v3 } = useContextSelector(({ v1, v2, v3 }) => ({ v1, v2, v3 }))

Thx a lot for your answer! 🙏

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
dai-shicommented, Oct 10, 2022

Because

const { v1, v2, v3 } = useContextSelector(({ v1, v2, v3 }) => ({ v1, v2, v3 }))

will trigger re-renders for any changes (like v4).

So, “one call, one value” pattern is the rule we follow. You might be interested in reading #19 discussion.

0reactions
soykjecommented, Oct 10, 2022

Ok thx a lot for all these informations, let’s read (and learn) then 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use React Hooks Context with multiple values for ...
This answer already does a good job at explaining how the context can be structured to be more efficient. But the ...
Read more >
How to pass Multiple Values in React Context?
React Context API is one of the best ways to share common data between components in a React application. We can easily pass...
Read more >
How to use React Context like a pro - Devtrium
First, we'll create a UserContextProvider component inside of a new file called UserContext.jsx . This component is the one that will hold the ......
Read more >
Pitfalls of overusing React Context - LogRocket Blog
Unfortunately, we still encounter the same problem. All components' consumers are rerendered whenever the value of our context changes.
Read more >
How to use React Context effectively - Kent C. Dodds
In Application State Management with React, I talk about how using a mix of local state and React Context can help you manage...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found