Dfferent between class based components and functional based component

Question

I know there are endless Questions and Answers about this, but everyone are talking about the code and the syntax.

what I'm asking is that what is the different between class based and functional based components, when it comes to performance, rendering, state managements and ...

should we use class based components at all or not.

read basics: https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/ — sidverma, Apr 08 '22 at 06:37
https://stackoverflow.com/questions/38926574/react-functional-components-vs-classical-components — Dennis Vash, Apr 08 '22 at 07:05

score 0 · Answer 1 · answered Apr 08 '22 at 07:02

Functional Components

In functional components, you need to export the default function export default function component() {} return to render content on the page and you can use React Hooks easily without worrying about this keyword

Example:-

export default function App () {
     const [count , setCount ] = useState(0)
     useEffect (()=> { 
      // start 
     } , [])
     useEffect (()=> { 
      // update 
     } , [])
     return (
       <> jsx </>
     )
}

Class Base Components

In class base components first, you have to inherit your class from React.Component. Class Base Components use render function to render content on the page. if you wana to use React Hooks its syntax is little bit different than functional components and you also have to add the this keyword with every variable

Example

class App extends React.Component {
 
  constructor (props) {
    super(props) 
    this.state = { count : 0 }
    // this.setState( {count : this.state.count })
  }

  // useEffect Syntax

  componentDidMount() {
   // start
  }
  componentDidUpdate() {
   // do update
  }

  componentWillUnmount(){
    // on destory
  }

  render () {
    return ( <> JSX </> )
  }

}

Dfferent between class based components and functional based component

1 Answers1