I'm having a discussion with a colleague on a pattern that seems very natural to me, and would like to know if it has any problems.
I usually have a good eye for spotting duplications in code, and do my best to remove them. But my friend thinks I do it too much, to a point where it gets too abstracted.
In React in particular, one pattern that seems natural to me is identifying which properties of multiple JSX blocks are unique to that iteration, and storing them in an object array, and then use map to put these values into the JSX. Something like this:
const componentData = [ {title: 'foo', value: 'bar', otherStuff: {stuff: 1, thing: 2}},{title: 'somethingElse', value: 'yes', otherStuff: {stuff: 3, thing: 4}}, ] return (<div> {componentData.map(c => <div title={c.title}><span>{c.value}</span><Component value={c.value} className={c.value ? 'class1' : 'class2'} {...c.otherStuff}/></div> }</div>)I like this pattern because it concentrates all of the JSX structure in a single place, and avoids having to repeat the same value in multiple places (c.value, in the example, is used 3 times in the JSX, but the value is only written once. This second point could also be achieved by writting a separate component to have this JSX, and ditching the array to write three times the new component, which is not that different from having an array of data objects:
<div><WrapperComponent title='foo' value='bar' otherStuff={{stuff: 1, thing: 2}}/><WrapperComponent title='somethingElse' value='yes' otherStuff={{stuff: 3, thing: 4}}/></div>This is fine for this bogus case, but I would still preffer the first one because there's less stuff on the screen, it allows for enforcing only similar items to be grouped (through typescript) and it allows controlling the order of items.
Also, there are some cases where the components could be different, but still have similar wrappers (like different contents all wrapped with a for example. This case requires something which is a bit worse, which is having a React Component for each object of the array, which makes typescripting a bit hard, but in my opinion is still prefferable to repeating the wrapper N times).
Additionally, my pattern allows for getting data from other arrays/objects in the parent context based on some of the object values. In some cases, passing down the object to a wrapper component could have complications.
I also find that this pattern helps identify further possible abstractions, because you're forced to standardize everything.
My friend's points against my pattern is that it is too abstract, and that filtering/reordering this array on every render could worsen performance.
I'd like to know if this is a commom pattern. It has always seen very natural to me. Obviously I do know this kind of stuff is used for cases where the data is of a variable size like coming from a DB. My question is more about the application of this for hard-coded items, with the idea of simplifying maintance, instead of dealing with variable data.