title: When to decide whether to use function or class for dumb components in React?
body: <p>I'm working on a project where I am using <strong>higher order component wrappers (HOC)</strong> to bind event handling for window/ document level. I have some components that are function based and others are class based components. I'm trying to figure out how do we determine whether to use functions or classes for the component. As a rule, I use class-based if component uses (simple) internal UI states, or need to hook up lifecycle methods.</p>
  
  <p>My functional components are mostly pure functions that take some parameters and simply return a component. Like so,</p>
  
  <pre><code>const TextInput = ({value}) =&gt; {
    return &lt;input type='text' value={value} /&gt;
  }
  export default TextInput
  </code></pre>
  
  <p>But what if some functional components need conditional logic to render different child-components based on what props they have. </p>
  
  <pre><code>import {Text, Select, Radio} from '../items'
  const InputType = ({value, type}) =&gt; {
    // assume that this function has a lot of ifs. else, switch, etc to assign
    // a type to RenderedItem
    let RenderedItem = null
    switch type {
      case 'text':
        RenderedItem = &lt;Text /&gt;
      case 'select':
        RenderedItem = &lt;Select/&gt;
      case 'radio':
        RenderedItem = &lt;Radio /&gt;
    }
    return RenderedItem
  }
  export default InputType
  </code></pre>
  
  <p>Does it make sense to use a class-based in such case? So I can use render functions to create child-components, and simply pass this to the render method. Like this,</p>
  
  <pre><code>import {Text, Select, Radio} from '../items'
  import React from 'react'
  class InputType extends React.Component {
    itemTorender () {
      let component = null
      // logic to determine component to render
      ...
      return component
    }
  
    render () {
      {this.itemToRender}
    }
  }
  export default InputType
  </code></pre>
  
  <p><strong>"But why do you want to use class, when the same thing can be done using a functional component?"</strong>
  ..because I'm getting an issue where when I wrap my components inside a HOC, I lose focus of input field on every onChange event. I read that this is usually caused because the <code>render</code> function should not be used to create component. It should only pass the rendered component.</p>
  
  <p>But since I have so much rendering logic in my functional component, would it make sense to create a class component instead, put all my rendering logic in a function and call this function in the <code>render</code> method.</p>
  
  <p>Any info in this regard will be helpful.</p>