Problem
I understand the differences between the two primary approaches of developing components after spending some time understanding React.
My question is when and why should I use which one. What are the advantages and disadvantages of each?
ES6 classes:
import React, { Component } from 'react';
export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}
Functional:
const MyComponent = (props) => {
return (
<div></div>
);
}
I’m thinking functional whenever that component doesn’t have any state to alter, but is that it?
If I employ any life cycle methods, I’m guessing a class-based component would be the best choice.
Asked by omarjmh
Solution #1
Old Answer: You have a good point. If your component doesn’t do much more than take in props and render, go with functional. You may think of these as pure functions since, given the same props, they will always render and behave the same way. They also have their own internal state and are unconcerned about lifecycle techniques.
Because they’re lightweight, it’s rather common to write these simple components as functional components.
Use classes instead of variables if your components require greater capability, such as preserving state.
More info: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
New Answer: Much of the foregoing was accurate until React Hooks were introduced.
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
</div>
)
}
default export Counter
As a side note, I’ve heard a few folks talk about avoiding utilizing functional components for performance reasons, notably that they’re inefficient.
While this is correct, please examine whether your components are rendering at such a high rate or volume that this is a cause for worry.
If they are, you can use the useCallback and useMemo hooks to prevent redefining functions. However, keep in mind that this may cause your code to perform (microscopically) poorer.
But, to be honest, I’ve never heard of rewriting functions in React apps causing a bottleneck. Premature optimizations are the source of all evil; keep this in mind when you have a problem.
Answered by Jeff Cousins
Solution #2
UPDATE March 2019
Building on what I said in my first response, I’ll say this:
“Are there any significant distinctions between React functions and classes? There are, of course — in the mental model.”
UPDATE Feb 2019:
With the introduction of React hooks, it appears that the React team wants us to use functional components whenever possible (which is more in line with the functional nature of JavaScript).
Their motivation:
1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines
A functional component with hooks can perform essentially everything a class component can do, but without the disadvantages listed above.
I recommend that you use them as soon as possible.
Original Answer
“They perform just as classes,” according to functional components, which are no more lightweight than class-based components. – https://github.com/facebook/react/issues/5677#issuecomment-241190513 – https://github.com/facebook/react/issues/5677#issuecomment-241190513 – https://github.
Although the above link is a little out of date, the documentation for React 16.7.0 states that functional and class components:
“As far as React is concerned, they are equivalent.” – https://reactjs.org/docs/components-and-props.html#stateless-functions (https://reactjs.org/docs/components-and-props.html) (https://reactjs.org/doc
Apart from the syntax, there isn’t much of a difference between a functional component and a class component that simply implements the render method.
“We [React] might incorporate such optimizations in the future,” according to the above site.
If you want to improve performance by removing superfluous renderings, both ways can help. PureComponent for classes and memo for functional components.
-https://reactjs.org/docs/react-api.html#reactmemo
-https://reactjs.org/docs/react-api.html#reactpurecomponent
It is all up to you. If you want to cut down on the boilerplate, go functional. If you prefer functional programming to classes, this is the way to go. Classes are the way to go if you want your code to be consistent across all components. If you’re tired of having to refactor from functional to class-based components every time you need something like state, use classes instead.
Answered by Galupuf
Solution #3
Whenever possible, attempt to employ stateless functions (functional components). In some cases, you’ll need to use a standard React class:
You can now extend a React class called PureComponent (rather than Component) that implements its own shouldComponentUpdate method that handles shallow props comparison for you. Continue reading
Answered by ffxsam
Solution #4
They can have a state, they can have hooks (that act as lifecycle methods), and they more or less overlap with class components as of React 17 (React.SFC deprecated, Dan Abramov on React.SFC). They can have a state, they can have hooks (that act as lifecycle methods), and they more or less overlap with class components as of React 17 (React.SFC deprecated, Dan Abramov on React.SFC).
Class based components
Functional components:
Why am I a fan of functional components?
React reason for why you should use hooks (i.e. functional components).
Answered by Karim
Solution #5
Because you can reuse form input fields and break them apart using React display conditionals, forms are easier with functional.
Classes are a single large component that cannot be separated or reused. They’re preferable for function-heavy components, such as a pop-up module component that runs an algorithm.
Reusability with functional components is the best practice, and then using small functional components to create larger portions, such as form input fields imported into a file for a React form, is the best approach.
Another great practice is to avoid nesting components while doing so.
Answered by coder9833idls
Post is based on https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components