i can not react

Deciding between a Function or Class Component

April 27, 2019

This article is written by fgarcia-student

React.js

tldr;

Start with a Function component, leveraging the new React Hooks API introduced in 16.8 . As of November 2nd 2018 Dan Abramov, one of the maintainers of React, advised that this is the way to write React components from here on. If you need any currently unimplemented features, or a library you use does not support hooks then stay with a Class component.

React has gone through a Component API change before

Before Class Components were introduced, there was a (now deprecated) createClass method that was the standard. Here is an example of what a call to this method looks like:

const MyComponent = React.createClass({
  render() {
    return <h1>Francisco's First React Component!</h1>
  },
})

Then, ES6 came and delivered many features. One of which was the introduction of Classes. The ability to have an OO styled project in Javascript’s prototypal inheritance world was big. It helped curate the Class Component:

class MyComponent extends React.Component {
  render() {
    return <h1>Francisco's Second React Component!</h1>
  }
}

If you wanted to maintain state in your component, those we’re the only ways to do it. If your component did not need state however, you could opt for a function component:

const MyComponent = () => <h1>Francisco's Third React Component!</h1>

There has recently been a new API introduced to find a more ‘atomic’ version of state. This would allow for more organic growth when writing React components, and also opened up the floor for a powerful new way to share logic across components.

Gif of Hook from the movie Hook

Hooks to Classes after Dan names them the new standard

React Hooks take the stage

Hooks allow you to opt-in to state as you need it. For example, if our components implemented a button with a counter to track the number of clicks, we could implement it as follows:

Class

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  handleClick = () => this.setState({ count: this.state.count + 1 })

  render() {
    return (
      <>
        <h1>Francisco's Second React Component!</h1>
        <button onClick={this.handleClick}>
          I've been clicked {this.state.count} time(s).
        </button>
      </>
    )
  }
}

Function

const MyComponent = props => {
  const [count, setCount] = React.useState(0)

  const handleClick = React.useCallback(() => {
    setCount(count => count + 1)
  }, [])

  return (
    <>
      <h1>Francisco's Third React Component!</h1>
      <button onClick={handleClick}>
        I've been clicked {this.state.count} time(s).
      </button>
    </>
  )
}

We accomplished the same as the class component using a few new methods in less lines of code. Because we can now opt-in to having state as we need, we can always start with a Function component. This is great news! Even Dan Abramov said in his article on hooks


It turns out that these built-in Hooks aren’t only useful for creating custom Hooks. They are also sufficient for defining components in general, as they provide us with all the necessary features like state. This is why we’d like Hooks to become the primary way to define React components in the future.


Whats next ?

Who knows? It’s up to those of us in the community to find out what works and what can be improved upon. That’s how all great things are curated. Innovation and curiosity.

So, what should I use? Function or Class Components in April 2019?

Function components if you do not need getSnapshotBeforeUpdate or componentDidCatch, or if you have a particular library that is not compatible with Hooks. All other use cases are covered by Hooks.

Final Thoughts

I posted some resources to learn more about Hooks below. Thanks to everyone who made it this far. If you like what I wrote, check out my blog for more of my content, and continue to check in here for more React related posts!

Happy Coding!

Francisco Garcia

Github: @fgarcia-student