useCallback

by Matt Tyson

HTML

<div id="root" />

CSS

input {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  margin: 10px;
}

p {
  font-size: 16px;
  margin-top: 10px;
  font-family: Fira Code, Consolas, Source Code Pro, monospace;
}

React

//const {useReducer, Fragment} = React;

const List = ({ items }) => {
  const [counter, setCounter] = React.useState(0);

  const incrementCounter = React.useCallback(() => {
    setCounter(counter + 1);
  }, [counter]);

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item} - {counter}
          <button onClick={incrementCounter}>Increment</button>
        </li>
      ))}
    </ul>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <List items={["Andhra Pradesh","Assam","Bihar","Gujarat","West Bengal"]}/>
);