Trying to memoize

This code keeps updating the entire input when I make a change to one item in the input. I'd like to only update the item I need to update avatar
2 years ago
1.1 kB
import * as React from "";
import * as ReactDOM from "";

// Fix this bad React code
// See how slow it is to type into an input
// This is due to too many html elements in the dom updating at the same time
// Ensure only one input changes per event while keeping a composed list state as an array
// Hint: use the console tab on the bottom left hand corner to track updates
// Hint: You may need to split this into multiple components
const Component = () => {
let [list, setList] = React.useState(new Array(500).fill(""));
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
    {, index) => {
    console.log(`This input #${index} rerendered!`);
    return (
        onChange={({ target: { value } }) => {
        let newList = [...list];
        newList[index] = value;

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