Rule Proposal: always use functional components for pure render component

This code should be always

class Something extends Component {
  componentDidMount() {
    someSideEffect()
  }
  
  render() {
    return (
      <div>
        // Some complex structure
      </div>
    )
  }
}

refactored to this:

const SomethingRenderer = () => (
  <div>
    // Some complex structure
  </div>
)

class Something extends Component {
  componentDidMount() {
    someSideEffect()
  }
  
  render() {
    return <SomethingRenderer />
  }
}

Proposal

Always extract rendering into separate functional render components. Never mix them with dirty class based components.

Benefits:

1. Composability of renderers - because they will have no dependencies on hooks/state/instance.
2. Readability of renderers - data comes from props only, not from state/instance
3. 0 extra work once you want to reuse renderer somewhere else, just move it to a separate file or export it.
4. Render components are likely to survive any react api changes, because they only rely on props, function with props returning jsx will never change.

[ljharb]

Certainly it can be. What I’m trying to suggest is that it’s a bad rule because it would be forcing separation that isn’t needed to ensure a clean codebase.

[ljharb]

Since there aren’t any others who’ve expressed interest, I’ll close this.