Deciding between a Function or Class Component
April 27, 2019
This article is written by fgarcia-student
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.
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!