When should a component react as a function and not a class?
I'm not sure when to declare react components as simple stand-alone functions as opposed to normal syntax class myComponent extends Component
. To use the example from the React docs (located here ):
Hereinafter referred to as "component"
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
For now, it appears to be just a function and is declared like any regular old function. Then the next paragraph is ALSO defined as a component and looks more like what I think the component should look like:
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}
What is the difference between these two "components"? Is the first example actually a component unless it inherits from the Component class and is not created with React.createClass
? I would appreciate it if someone could explain this difference, as I couldn't find the answer anywhere in the docs.
source to share
If you do not need to use lifecycle methods and the component is not functional, you can declare the component as a function. Component lifecycles like componentWillMount()
and componentDidMount()
can only be used if the component is a class that extends Component
.
source to share
Calculator
It must be specified as a component to a class basis, as it depends on the condition of internal components, ie this.setState({...})
. Functional components, also known as stateless components, do not have a backup instance , so they cannot maintain local state in the same way.
Personally, I always try to write functional components as they are arguably easier to test due to their nature of consuming props and returning an instance tree ReactElement
. I will only convert the component to a class if it is:
- it is necessary to manage its own state based on the view, that is, not applicable to the state of the entire application.
- Benefits from lifecycle methods as a means of improving performance through limited re-rendering
- require references to child nodes
ReactElement
or DOM via refs
source to share
There are two additional docs from Facebook that explain this quite well:
https://facebook.github.io/react/docs/components-and-props.html https://facebook.github.io/react/docs/state-and-lifecycle.html
TL; The DR "component" is primarily responsible for representing some DOM. Depending on how your application is organized, your component may or may not have to maintain its own state or have access to lifecycles like componentDidMount
or render
. In case you need these functionality, your component must be a class that inherits from React.Component
. Otherwise, you will probably avoid writing your component as a plain old function.
source to share