# Best practice for getting ledger state in multiple nested react components

**URL:** <https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814>\
**Category:** App Development\
**Created:** [December 16, 2020, 9:15am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814 "2020-12-16T09:15:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bernhard](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bernhard/32/356_2.png) [@bernhard](https://forum.canton.network/u/bernhard)\
**Post date:** [December 16, 2020, 9:15am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814/1 "2020-12-16T09:15:01Z")

</div>

Suppose I have a tempalte `Foo` and to react components `Outer` and `Inner`, where `Inner` is a child of `Outer`. If I need `useStreamQueries(Foo)` in both `Outer` and `Inner`, is there an advantage to passing the result as a prop from `Outer` to `Inner`, or is it just as good to call `useStreamQueries` a second time in `Inner`?

I’m mostly interested in whether the second option will generate double the traffic over websockets.

---

<div class="post-metadata">

**Author:** ![cocreature](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/cocreature/32/36_2.png) [@cocreature](https://forum.canton.network/u/cocreature)\
**Post date:** [December 16, 2020, 9:17am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814/2 "2020-12-16T09:17:15Z")

</div>

The second option will generate 2 websockets connections and at the moment also 2 transaction streams to the legder so I’d definitely recommend passing the data down instead of querying the same data multiple times.

---

<div class="post-metadata">

**Author:** ![bernhard](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bernhard/32/356_2.png) [@bernhard](https://forum.canton.network/u/bernhard)\
**Post date:** [December 16, 2020, 9:58am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814/3 "2020-12-16T09:58:49Z")

</div>

How would I do that in typescript? The query result has type `QueryResult<Foo, Foo.Key, "FoosTemplateId">`. How do I get my hands on “FoosTempalteId” to declare the type of the props of `Inner`?

---

<div class="post-metadata">

**Author:** ![cocreature](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/cocreature/32/36_2.png) [@cocreature](https://forum.canton.network/u/cocreature)\
**Post date:** [December 16, 2020, 10:11am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814/4 "2020-12-16T10:11:28Z")

</div>

Here’s an example. We should add a helper `User.User.QueryResult` similarly to how we have `User.User.CreateEvent`. While the solution here works it looks a bit awkward:

```haskell
  const allUser: QueryResult<User.User, User.User.Key, typeof User.User.templateId> = useStreamQueries(User.User);
  const allUserContracts: readonly User.User.CreateEvent[] = useStreamQueries(User.User).contracts;

```

---

<div class="post-metadata">

**Author:** ![bernhard](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/bernhard/32/356_2.png) [@bernhard](https://forum.canton.network/u/bernhard)\
**Post date:** [December 16, 2020, 10:16am UTC](https://forum.canton.network/t/best-practice-for-getting-ledger-state-in-multiple-nested-react-components/1814/5 "2020-12-16T10:16:39Z")

</div>

Ahh, it was the `typeof` magic I was missing, thanks. The helper would indeed be nice.