New To Hooks

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!