Sometimes I meet in code of other people constructions that look like this:
const TextField = () => {
const renderLabel = () => {..}
const renderInput = () => {...}
const renderFooter = () => {...}
return (
<div>
{
renderLabel();
renderInput();
renderFooter();
}
</div>
)
}I understand why they use this way, cause it's can be situation when "return" is too small to split it to separate components and at the same time I want it to look more comfortable to udnerstand.
But only one questions here, why everywhere people use functions for these "renderLabel", "renderInput" and so on?
What cons of the way when I just create them as variables const renderLabel = <div>...</div>
and then render it?
I don't know about those functions in your example, but I use such functions to generate the component that I need depending on a parameter.
For example, when I build tabs content I may write something like this:
layout:
<button onClick={() => setActiveTab('tab1')}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')}>Tab 2</button>
<div>{generateTabContent(activeTab)}</div>
generate tab content function:
function generateTabContent(activeTab) {
switch (activeTab) {
case 'tab1':
return <Tab1 />
// etc...
}
}
This function is pure (it accepts the param, instead of calling the state value), and can be extracted to utils folder if needed.