Render functions in react

by OliverRadini   Last Updated September 11, 2019 15:05 PM

In code which uses React, I occasionally see a pattern where functions are used to return JSX, for instance:

function RenderARow (text, number) {
  return (
    <tr>The text is {text} and the number is {number}

This is a trivial example but the pattern itself can be useful, that is to say it helps to break out certain parts of the render code so that they can be considered separately, or reused.

That being said, it seems like something of an anti-pattern to code like this. Functional components already exist as a pattern for taking in arguments and returning JSX. It seems preferable to have one 'function returning JSX' within a given file, in order to prevent the scale of render-code within a given file becoming unmanageable and difficult to test.

Splitting this kind of function out across multiple files seems advantageous; these 'render-functions' can then be easily tested and reused, and files are kept more lightweight.

On the other hand, separating out all of these types of functions into separate files could easily mean that you end up with a great deal of files which are unlikely to be reused, and that you may need to go across a large number of files just to see what a render call is doing.

Is there a common opinion on whether or not this kind of function is good or bad in general when developing React code?

Tags : reactjs

Related Questions

Updated July 30, 2015 14:02 PM

Updated July 06, 2017 21:05 PM

Updated August 22, 2017 19:05 PM

Updated February 10, 2017 14:02 PM

Updated January 12, 2019 20:05 PM