React Class vs React Function

As you start exploring react you can see that you have a choice to use either functional or class components:
Support: https://reactjs.org/docs/getting-started.html

Before you start using one particular component you should try using each component and see its plus and minus points.

I tried and below are some points which can help you:

  1. A react function is a plain javascript function but react class component is an extended class component
  2. React function component is a stateless component but react class component is a stateful component
  3. React functions use React hooks whereas react class components use react lifecycle methods
  4. React function components can use react hooks as many times as required but you can use the react lifecycle method only once in a react class components
  5. React class components require a render() method and by default contains a constructor method while react function requires none.
  6. React class components need to bind() with the child functions with this keyword or use the arrow function, function components don't have to bind.

--

--

--

Technical Writer, Software Developer, Blogger, and Career Development Coach…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The first programming language you should learn.

DOMinate The Web

The Power and Perils of arguments

React 18 Release Candidate is Released | Learn React 18, it's APIs and SSR Improvements

Programinja | thealiraza | React 18 Release Candidate is finally here.

Structure JavaDoc of Constructors

Secure a Github Webhook with Node.js | Dev Extent

Angular for React Devs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chanchala Gorale

Chanchala Gorale

Technical Writer, Software Developer, Blogger, and Career Development Coach…

More from Medium

Redux Toolkit — The cheat sheet for Redux development

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-III

React Hooks

What is this React Hooks