React

by Rajesh Dixit

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const { useState } = React
function TodoApp() {
  const arr = [1,2,3,4,5].map((n) => ({ value: n }));
  const [data, setData] = useState(arr);

	if (!data[0].id)
    setTimeout(() => {
      const newArr = arr.map(({value}) => ({ value, id: `btn_${value}`}));
      setData(newArr)
    }, 5000)
  return data.map(({ value, id }) => {
    return (<MyButton key={value} value={value} id={id}/>);
  })
}

function Button({id, value}) {
	const onClick = () => {
  	console.log(`${id} - ${value}`)
  }
  console.log(`Rendering Btn ${value}`)
	return (<button id={id || '__'} onClick={onClick}>{ value }</button>);
}

const MyButton = React.memo(
	Button,
  (prevProps, nextProps) => {
  	return prevProps.value === nextProps.value
  }
)

ReactDOM.render(<TodoApp />, document.querySelector("#app"))