What is the benefit of abstracting out render methods to functions in a class?


(james) #1

I’ve seen a pattern in which a developer mentions, paraphrasing, if a dev has to create seperate render functions the its probably a good idea to not muddy up the component and extract it out. ala.

class doSomethingComponent extends Component {
  renderLeftNode() {},
  renderRightNode() {},
  renderMondayDispoay() {}

  render() {
    return (
      // conditionals to render out those renders mentioned above..
    )
  }
}

TO something like this.

function renderLeftNode() {};
function renderRightNod() {};
function renderMondayDisplay() {};

class doSomethingComponent extends Component {
  render() {
    return (
      // conditionals to render out those renders mentioned above..
    )
  }
}

I’d like to know the benefit of the abstraction out


(Jed Fox) #2

The idea is that you would extract them to functional components, which are easier to test individually, and by separating them out, too can verify there are no unnecessary dependencies between the two components. Also, this lets you use JSX syntax instead of function calls.