blog-08-04-key-magic-key-cheatsheet

key.ts

import Bar from 'components/Bar';

const Foo = ({ inputs }) => inputs.map((input, index /* do NOT use index as a key */) => (
  <Bar key={`${input.type}-${input.name}`}>{/* id is the best, if non avail try to generate any unique string, which will be the same for the same item */}
  </Bar>
)));

/*
  if `inputs` prop was `[{type: 'file', name: 'file'}, { type: 'number', name: 'price' }]`
  and then has been changed to `[{type: 'file', name: 'file'}, { type: 'text', name: 'title' }]`
  Only the second <Bar> component will be rerendered. First element's key stays the same, so React does not rerender it.
*/