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

• 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

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