title: Should React/Redux development be Object Oriented Programming or Functional Programming?
body: <p><strong>EDIT (2021-02-12):</strong>
  Since asking this question I have spent a lot of time working on React &amp; 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.</p>
  <p>There is a related SO question &amp; answer here: <a href="https://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif">React functional stateless component, PureComponent, Component; what are the differences and when should we use what?</a></p>
  <hr />
  <p>I have very recently joined the React &amp; 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?</p>
  <p>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:</p>
  <pre><code>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
      }
  }
  </code></pre>
  <p>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 <code>connect</code> method and <code>mapStateToProps</code>. 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:</p>
  <pre><code>const MyComponent = ({ myPropA, onEvent }) =&gt; {
      // output HTML here
  }
  
  const mapStateToProps = state =&gt; {
      return {
          myPropA: state.myPropA
     }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          onEvent: data =&gt; dispatch({
              type: 'ACTION_NAME',
              data
          });
     }
  }
  
  connect(mapStateToProps, mapDispatchToProps)(MyComponent);
  </code></pre>
  <p>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?</p>
  <p>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. :)</p>