const { useState, memo } = React;

const data = Array(3).fill()

function RandomColor() {
  const [selected, setSelected] = useState(null);

  const updateColor = (color) => {
    setSelected(color)
    console.log(`You choose ${color}`)
  }

  return (
    <>
      <span>{selected}</span>
      {data.map((_, id) => (
        <Color key={id} onClick={updateColor} />
      ))}
    </>
  );
}

// Composant mémoïsé qui n'effectuera de rendu que si la valeur props changent
const Color = React.memo(({ onClick }) => {
  
  const style = { backgroundColor: '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0')}
  
  return (
    <button onClick={() => onClick(style.backgroundColor)} className="Color__cube" style={style} />
  );
});

ReactDOM.render(<RandomColor />, document.getElementById("root"));