import React, { useEffect, useState } from 'react'; import './styles.css'; type InputProps = { onChange?: () => void; placeholder: string; label?: string; id?: string; }; const Input = ({ onChange, label, placeholder, id }: InputProps) => { useEffect(() => { console.log(`Input re-renders`); }); return ( <> {label} ); }; const data = [ { id: 'business', placeholder: 'Business Tax' }, { id: 'person', placeholder: 'Person Tax' }, ]; const InputMemo = React.memo(Input); export default function App() { const [order1, setOrder1] = useState(false); const [order2, setOrder2] = useState(false); const inputs1 = order1 ? [...data].reverse() : data; const inputs2 = order2 ? [...data].reverse() : data; return (

"key" attribute example

Inputs with array index as keys

Inputs are memoized, but re-render when re-ordered

setOrder1(!order1)} /> Check to re-order {inputs1.map((val, index) => ( ))}

Inputs with id as key

Inputs are memoized and don't re-render when re-ordered

setOrder2(!order2)} /> Check to re-order {inputs2.map((val) => ( ))}

); }