DEV Community

Heru Hartanto
Heru Hartanto

Posted on

React Functional over Class components ? 🤔

Component is a reusable part that should be able to use anywhere inside user interface.

There are two way to create component, first using functional component and second using class component, I prefer using functional except when I need using state management or take benefit from lifecycle, here is why

Functional component or stateless component

  • Just function that return HTML
  • Give solution without managing state and able to consume props
    function Hey(props){
        return <h1> hello {props.name}</h1>
    } 
    export default Hey
Enter fullscreen mode Exit fullscreen mode
  • No render method, just return
  • Component lifecycle such as mounting and updating doesn't exist, instead functional component using useEffect() to replicate lifecycle behavior, and useState() to store state

Class component or stateful component

  • Classes that extends component class from react library
  • Managing state this.setState and able to consume props with this.props
  • Have render() method, and must using it to render HTML
  • Have three phases of lifecycle there is mounting, updating, unmounting
    • Mounting: when putting elements into the DOM (constructor, getDrivedStateFromProps, render, componentDidMount)
    • Updating: when component is updated (getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate)
    • Unmounting: when component remove from the DOM (componentWillUnmount)
    import React, { Component } from "react";
    class Hey extends Component{
        constructor(props) {
            super(props);
            this.state = {
                name:'';
            }
        }
        render() {
            return(
               <h1> Hey {this.state.name} </h1>
            )
        }
    }
    export default Hey
Enter fullscreen mode Exit fullscreen mode

So why functional components ?

  • Less code
  • More readable because it's like a plain javascript function
  • More easy to separate from container

Conclusion

If you don't need your own state or access lifecycle, use functional component as much as possible

Discussion (0)