React, when should I use class component and when to use no class component?

Question

I am new to react, and I noticed 2 ways that components built, and wanted to know which to use when

this is the first type, seems like the logical one that I would always use

import React, { Component } from "react";
import { connect } from "react-redux";

class ConnectedForm extends Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
            <form>
              <div> blah blah</div>
            </form>
        );
    }
}
const Form = connect()(ConnectedForm);
export default Form;

but then there is this simple looking component with no class and it's not extending the component:

import React from "react";
import { connect } from "react-redux";

const mapStateToProps = state => {
    return state.locations;
};

const LocationsList = ({ locations }) => (
    <ul>
        {
             locations.map(el => (
            <li key={el.id}>
               Name - {el.name}, Address - {el.address}, Coordinates - {el.coordinates}, Category - {el.category}
            </li>
        )) }
    </ul>
);
const List = connect(mapStateToProps)(LocationsList);
export default List;

I was wondering whats the name of each approach, and when I should prefer the simpler one over the class one?

Shmili Breuer · Accepted Answer · 2019-08-08 17:02:47Z

1

Usually you want to use a "Class based component" for anything thats going to have logic in it and a "Functional component" if it is only displaying data or doing simple interactions which you will pass in as props or use hooks.

Hope this helps.

answered Aug 8, 2019 at 17:02

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alvaro Over a year ago

Since hooks were released its preferred to use Functional components with hooks, which can do what class based components only could.

Shmili Breuer Over a year ago

I mentioned that in my answer but still prefer to use a class based component when there is lots of logic, so not to have to set up hooks for every functionality I need. But in principal @Alvaro is right.

Collectives™ on Stack Overflow

React, when should I use class component and when to use no class component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related