Should React/Redux development be Object Oriented Programming or Functional Programming? [closed]

Question

EDIT (2021-02-12): Since asking this question I have spent a lot of time working on React & Redux applications and I can understand why there might not be one correct answer as it depends on the use case and both solutions may be used to achieve the same goal. However I still believe it would be beneficial if it would be documented - especially for newcomers - on the reasons why one would choose one approach over the other. Regretfully, saying everything is opinion-based does not provide any guidance.

There is a related SO question & answer here: React functional stateless component, PureComponent, Component; what are the differences and when should we use what?

---

I have very recently joined the React & Redux ecosystem; and while I can appreciate the clean organisation between components provided by React (plus lots more) and the three principles of Redux; I am finding difficulty in deciding what is the best way to develop; Object-Oriented or Functional?

Before React/Redux, we used to develop using ES6 classes; which provide a very tidy syntax for Object-Oriented programming, especially inheritance. All component classes where built on the following simple structure:

export default class MyComponent extends React.Component {
    constructor(){
        // initialise state here
    }

    componentWillMount(){
        // populate state here
    }

    componentDidMount(){
        // update UI/bind listeners here
    }

    render(){
        // output HTML here
    }
}

After the introduction of Redux, I began to feel that the above structure is no longer what I'm after since the components are no longer maintaining their own state; but instead the state is coming from the Redux store and passed as a prop using the connect method and mapStateToProps. Together with the concept of immutable data, this seemed to favour a functional programming approach, where all functions are first-class functions. The above component now begins to look like:

const MyComponent = ({ myPropA, onEvent }) => {
    // output HTML here
}

const mapStateToProps = state => {
    return {
        myPropA: state.myPropA
   }
}

const mapDispatchToProps = dispatch => {
    return {
        onEvent: data => dispatch({
            type: 'ACTION_NAME',
            data
        });
   }
}

connect(mapStateToProps, mapDispatchToProps)(MyComponent);

The functional programming approach seems to better favour the React/Redux combination, however I cannot help but feel that some useful OOP are being missed out on. What is the best practice in regards to the React/Redux technology stack? It seems like everyone is doing something different; however is there a recommendation or best-practice? Would it be sensible to say that presentation (dumb) components are functional components while containers (smart) are class components? Or perhaps whenever you need the component lifecycle it should be a class, but otherwise a functional component?

I am aware that OOP vs FP is a broad topic; however within the scope of React/Redux I am hoping there is a single correct answer. :)

Answer 1

The question is more about, should I use stateless or statefull component ?

If you only need the properties from your component, then it's a stateless component and you can use functional programming to create it. It gives you code with fewer lines, it's also easier to read and easier to test.

If you need to manage a state inside you component then it's a statefull component and you need to use ES6 classes to describe its behaviour like you did before.

I saw on many projects the disctinction between Presentational and Container Components.

Presentational Components only render data from props and therefore are stateless components and can be created with a function. These components are not aware of redux, it's really easy to test these components.

Container Component manage a state and are aware of redux, they dispatch action and subscribe to redux state. They are statefull components and can be created using ES6 classes.

You can find these explanations on the redux documentation