When to Use Es6 Class Based React Components VS. Functional Es6 React Components

When to use ES6 class based React components vs. functional ES6 React components?

New Answer: Much of the below was true, until the introduction of React Hooks.

componentDidUpdate can be replicated with useEffect(fn), where fn is the function to run upon rerendering.
componentDidMount methods can be replicated with useEffect(fn, []), where fn is the function to run upon rerendering, and [] is an array of objects for which the component will rerender, if and only if at least one has changed value since the previous render. As there are none, useEffect() runs once, on first mount.
state can be replicated with useState(), whose return value can be destructured to a reference of the state and a function that can set the state (i.e., const [state, setState] = useState(initState)). An example might explain this more clearly:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

As a small aside, I have heard a number of people discussing not using functional components for the performance reasons, specifically that

"Event handling functions are redefined per render in functional components"

Whilst true, please consider if your components are really rendering at such a speed or volume that this would be worth concern.

If they are, you can prevent redefining functions using useCallback and useMemo hooks. However, bear in mind that this may make your code (microscopically) worse in performance.

But honestly, I have never heard of redefining functions being a bottleneck in React apps. Premature optimisations are the root of all evil - worry about this when it's a problem.

Old Answer: You have the right idea. Go with functional if your component doesn't do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Also, they don't care about lifecycle methods or have their own internal state.

Because they're lightweight, writing these simple components as functional components is pretty standard.

If your components need more functionality, like keeping state, use classes instead.

More info: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

React function or class component?

The most obvious difference is the syntax. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.

A class component requires you to extend from React. Component and create a render function that returns a React element.

functional components will give you the flexibility to use react hooks

see more differences here

React - Preference: function component vs class component

No, i think Class Components won't be abandoned today. Maybe in future.

They aren't lightweight as Functional Components can be, but i see a lot projects on community using Class Components.

However, here we have some reasons why the community is supporting the Functional Components approach:

Class Components requires more code but will also give you some benefits which you will see later on (the transpiled code by Babel will be larger too)
A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
Functional component are much easier to read and test because they are plain JavaScript functions (less code).
The React team mentioned that there may be a performance boost for functional component in future React version

See this answer: https://stackoverflow.com/a/49613435/4119452

More info: https://www.twilio.com/blog/react-choose-functional-components

React Component vs function, what should I use and why?

When the React component compiled to React.createElement(component). While the function remains the same. I didn't feel find any performance issues using either of them (YET).

Some of the advantages of using the function itself is, that you can use the functional programming techniques like currying. Also, not naming the parameters while passing it in the function.

The only small downside of functions is, if you have more than 5 parameters, the order matters, and if you have to call the function somewhere, where only the 5th param needs to be passed, you have to pass the default params for the first four.

You might find this helpful as well.
React functional component vs. plain-old JS function that returns React element

React functional components vs class components

For the long run, you should focus on functional components, as react team has suggested to use functional components with hooks to manage the state for component.

But that does not mean you should completely ignore class components. The reason is in professional life you may come up with the code base that was written before the introduction of hooks using class components and you are not allowed to refactor it to functional components ( there can be various reasons of not doing that) in that case your knowledge about class components will come in handy.

React Class components vs Functional components

Here you can see the cases where you will need class components

The most common case where you will need class components is if you want to make an ErrorBoundary, you will need a class component because you can't implement componentDidCatch with hooks... yet!

When to Use Es6 Class Based React Components VS. Functional Es6 React Components