New To Hooks
Tags: react, javascript
Published: 2021-11-03 23:21:21

In this post will explore hooks from the perspective of somebody new to implementing them in my React.js code. So what exactly are hooks? From my music background, I associate them with that part of a song that compels you to listen again, and might get stuck in your head, or you wake up humming without noticing, 'til your partner asks you to "please shut up"- chorus of "Don't Stop 'til You Get Enough", bass line to "Under Pressure" by Queen/Bowie, etc. In React it's not writing a bit of flashy code, but the parallel concept exists that the code you write can be a bit more reusable and concise (ie a catchy repeating chorus). 

The issue that exists, and hence why the folks at the React library developed a new structure for components, is that in the standard object-oriented class components, passing its state around an app can get cumbersome. Though in my own application, the Longwinded-Chef, my file structure was simple compared to an average web application, I saw firsthand how counter-intuitive it can be to store a component's state- it involved setting up a high level store at the top level of the app, connecting each component to that store, mapping the props that were inherited by parent elements or any conditional user-input related change to state, and sending that updated state to the store to be used and referenced throughout the app. I can only infer how that might get tangled quickly in a more complicated, real-world site.

Those same class components can just be rewritten as a functional component. Make sure to pass down the props as an argument to the function. Instead of writing:
 
```
state = {
attribute: initialValue
}
```
 
we set state as a const variable, and pass ONLY the initial value in as an argument to the setState hook:

```
const [anInitialState, aFunctionThatUpdatesThisState] = useState(passInAnInitialStateHere)
```

Here's a way to pass in a local state in a functional component to preserve it for future use, and a callback function that we will take that initial state and update it as we want (ie in onClick or onSubmit).

I am getting ahead of myself (as sometimes happens when I code)- these hooks we are using are inherited from 'react', so make sure to import it to avoid errors of course!!

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

Also, make sure all of your references to 'this' are taken away, as they won't work in functional components- that gets left in class/object oriented world. 

So now that you have a useState hook- a function inside your component can grab that state you've set and use that callback function to update it:

```
<button onChange={() => aFunctionThatUpdatesThisState(anInitialState * whatever)}>
```

That's the basic rundown on how hooks work: they are functions from React that let a functional component "hook" into state features- set values locally, set ways to update that state, all convenient within the component and without having to awkwardly store elsewhere to reference later- they are an intuitive way to manage components, and though I am new to them, and that there is way more to it than this basic layman's overview, they are the present and future convention on writing React code!