# Accessing Hooks state from another file?

**URL:** <https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185>\
**Category:** General\
**Created:** [February 3, 2020, 9:53pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185 "2020-02-03T21:53:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 3, 2020, 9:53pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/1 "2020-02-03T21:53:48Z")

</div>

Hey guys, yet ANOTHER question with React & Hooks. Here is my original code:

```auto
  const [contactMe, setContactMe] = useState(false)
  // Toggle contact form
  const toggleContactMe = () => {
    if (!contactMe) {
      document.getElementById('contact').scrollIntoView({ behavior: "smooth" })
      setContactMe(!contactMe)
    } else {
      setContactMe(contactMe)
    }
  }

```

That I am trying to now modularize in its own file, but in the React tools, it does not show `contactMe` as part of the global state.

New code:

```auto
// Hooks
import useContactState from '../hooks/useContactState'

const {contactMe, toggleContactMe} = useContactState(false)

```

`../hooks/useContactState` file:

```auto
import { useState } from 'react'

export default initialContactState => {
  const [contactMe, setContactMe] = useState(initialContactState)

  return {
    // Toggle contact form
    toggleContactMe: () => {
      if (!contactMe) {
        document.getElementById('contact').scrollIntoView({ behavior: "smooth" })
        setContactMe(!contactMe)
      } else {
        setContactMe(contactMe)
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 3, 2020, 10:11pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/3 "2020-02-03T22:11:38Z")

</div>

Not sure I understand. I thought `toggleContactMe` is the only thing I would be returning.

---

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 3, 2020, 10:18pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/5 "2020-02-03T22:18:56Z")

</div>

No, you absolutely did, this works!

```auto
import { useState } from 'react'

export default initialContactState => {
  const [contactMe, setContactMe] = useState(initialContactState)

  return {
    contactMe,
    // Toggle contact form
    toggleContactMe: () => {
      if (!contactMe) {
        document.getElementById('contact').scrollIntoView({ behavior: "smooth" })
        setContactMe(!contactMe)
      } else {
        setContactMe(contactMe)
      }
    }
  }
}

```

Had to pass the state through as well 🙂

EDIT: I am genuinely curious if this is okay as I can’t find the state yet in any component in the React Tools.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [February 4, 2020, 1:30am UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/6 "2020-02-04T01:30:32Z")

</div>

> [@rstorms](#):
>
> EDIT: I am genuinely curious if this is okay as I can’t find the state yet in any component in the React Tools.

Are you trying to use a hook outside of a component? Because that’s not the point of them. If you want state accessible globally, you define your hook somewhere high up the component tree in a component, then pass the values you want down. Using Context to store the `useState` values then using `useContext` to access the values in the components you want makes this easier if the pop drilling becomes onerous.

You should be able to just view the state by clicking on a component in the devtools, eg:

![Screenshot 2020-02-04 at 01.25.39](https://global.discourse-cdn.com/freecodecamp/original/3X/1/f/1f41472f470dda514353cf6d586fc8a1295f10d3.png)

But if you are calling it outside of a component, it won’t work properly, so would be why you can’t see it

ALSO if you are trying to write a custom hook, it should be `useInitialContactState`, not `initialContactState`

* * *

edit: What is your aim here, overall? You’re fumbling about with the technicalities of hooks, which is great, and you’re getting good, very specific advice, but maybe might be helpful to you from an advice PoV if we had a high-level view of what you’re trying to acheive and how you’re structuring stuff to do it

---

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 4, 2020, 2:04am UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/7 "2020-02-04T02:04:52Z")

</div>

Copy testing for editing of post.

---

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 4, 2020, 4:03am UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/8 "2020-02-04T04:03:22Z")

</div>

…And okay, this is where useContext comes in, huh?

But it seems to be the way I have it coded, the state is popping up like this under ‘Anonymous’?

 ![Screen Shot 2020-02-03 at 9.05.16 PM](https://global.discourse-cdn.com/freecodecamp/original/3X/8/e/8e6577de49fc0a7885c3a944425f5a2ac01f3c0f.png)

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [February 4, 2020, 8:31am UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/9 "2020-02-04T08:31:43Z")

</div>

Ah, I see. I understand why you’re having an issue here.

This one component on its own is incredibly complicated for what it needs to do. It’s immediately obvious that you are doing way, way, way too much in it. It should do _one_ thing, this is doing lots and lots and lots of things. Everything in `useEffect` is a side effect, and that useEffect block is enormous. You need to track the state in your head while you’re building this, and because the state can be modified in so many ways by those side effects, that’s not really possible. (You can have a seperate `useEffect` for every individual thing there btw, there is no penalty to doing that, and it means individual effects can be extracted out, but not sure that’ll help a lot here).

I’ll have a read through and try to unpick it a bit, but it’ll take me a while I think.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [February 4, 2020, 10:36am UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/10 "2020-02-04T10:36:58Z")

</div>

So

- The aim is to show a gallery of images.
- There is a nav bar, which allows you to filter the results.
- The overall “page” has a header and footer which aren’t really relevant atm, I’ll ignore them for the minute.
- The gallery “page” shouldn’t really care about login logic, it’s not relevant. It should only care whether a user is logged in or not.
- That login logic can go at the very top level of the app, seperated. When that state changes, anything that relies on that will rerender, which is what you want. This is a good usecase for Context. It should not be tied to the fetching/flitering logic for the gallery. Because you’re doing _everything_ in `ChizetteArt.jsx`, literally anything a user does will cause the entire app to rerender.
- You can see the effect by using the Profiler tab in the React dev tools: record a session and interact with the app to get profiling graphs.
- You are refetching the data every time a user filters, but you only need that data once, when the app loads (this is another good usecase for Context, but it should be a seperate context). It is, for normal usage, read-only.
- There is situation where that last point is not true, and that is when an admin user uploads a new image. At that point the updated data should be refetched: that is the only point at which the refetch needs to occur, and it is not going to be a common occurance.
- There are two very similar libraries for data fetching client-side that work really well that may be well worth looking at, providing a hook to make async calls: [react-async](https://github.com/async-library/react-async) and [swr](https://github.com/zeit/swr). The latter has a slightly nicer API & better docs (imo), and it’s supported by Zeit, who use it for the [Next.js](https://nextjs.org/) framework (_that tbh you should also probably look at, as it’s for building sites like yours would likely drastically simplify a lot of your logic_)
- The filtering logic could literally be put in the components that render the gallery images, you’re overabstracting here - there are only three options.

```auto
myGalleryData.filter(/* do filtery stuff */).map(/* map the images here */)

```

- If the state is complicated, you have `useReducer` rather than lots and lots of `useState`s.

> **[How to use React Context effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively/)**
>
> How to create and expose React Context providers and consumers

---

<div class="post-metadata">

**Author:** ![rstorms](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@rstorms](https://forum.freecodecamp.org/u/rstorms)\
**Post date:** [February 4, 2020, 5:34pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/11 "2020-02-04T17:34:55Z")

</div>

Copy testing for editing of post.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:36pm UTC](https://forum.freecodecamp.org/t/accessing-hooks-state-from-another-file/347185/12 "2021-06-01T19:36:57Z")

</div>

Closed on June 1, 2021, 7:36pm UTC