React: Still not using hooks? I had to spend 2 minutes back in a world without hooks and the sight was not pretty.

Hey there!

I've been using React since 2016, coming from an Angular 1 background and I've loved React from day one.

When I started building my current project, I took the opportunity to embrace all the new things that awesome people had been creating in the core of React. I'm mainly talking about hooks : https://en.reactjs.org/docs/hooks-reference.html

I've really gotten used to them, they became a new natural way to do things in React using functional components. But I didn't realize how awesome they were until I had to go back to a non-hooked version of React. (I tried upgrading, but the project uses a static site generator which failed to support hooks in the 2 minutes I allocated to trying)

Those are two snippets that summarize my sudden realization that the past was great but the present is awesome.

What I'm now used to: React with hooks

import React from 'react'

export default function ShinyComponent() {
  const [title, set_title] = React.useState('')
  return <input type="text" value={title}
                onChange={(e) => set_title(e.target.value)}
  />
}

What I've used before for several years : React without hooks

import React from 'react'

export default class ShinyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { title: ''}
  }
  render() {
    return <input type="text" value={this.state.title}
                  onChange={(e) => this.setState({
                    title: e.target.value
                  })}
    />
  }
}

I don't know about you, but one feels easier to read and maintain than the other. I've gotten so much used to the single method returned to set one value of the state, that using "this.setState" felt SO WEIRD...

Hooks changed my approach to building with React. It took some time though to get acclimated to the new syntax and its caveats your encounter when you dive deeper, but I definitely recommend to go through the initial pains and use them as they make your code cleaner and easier to maintain.

Keep on coding!

PS: I knew I understood hooks the day my brain told me: "hey you can create a hook for doing that!".

PS2 : Here is the first answer from Google for "beginners guide to react hooks": https://www.valentinog.com/blog/hooks/ and it's a great read if you want to get started! (note : that's not my blog, nor do I know the author)