Styjun

A very simple list with inputs that are supposed to be addable and updatable.
The problem occurs after I add one or more inputs and then try to type inside of one of the inputs - all inputs after the one being typed in disappear.

It has something to do with memo-ing the Item component and I'm looking to understand what exactly is happening there (valueChanged getting cached?). I can't wrap my head around.

Without the memo function the code works as expected but of course, all inputs get updated on every change.

Here's a gif of what's happening: https://streamable.com/gsgvi

To replicate paste the code below into an HTML file or take a look here: https://codesandbox.io/s/81y3wnl142

<style>
 ul 
 list-style-type:none;
 padding:0;
 

 input[type=text] 
 margin:0 10px;
 
</style>


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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">

 const randomStr = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
 const useState, memo, Fragment = React



 const Item = memo(( value, i, valueChanged ) => 

 console.log('item rendering...');

 return <li>
 <input type='text' value=value onChange=e => valueChanged(i, e.target.value)/>
 </li>
 , (o, n) => o.value === n.value)


 const ItemList = ( items, valueChanged ) => 

 return <ul>
 items.map(( key, title , i) => (
 <Item 
 key=key 
 i=i
 value=title
 valueChanged=valueChanged
 />
 ))
 </ul>
 



 const App = () => 

 const [items, setItems] = useState([
 key: randomStr(), title: 'abc' ,
 key: randomStr(), title: 'def' ,
 ])

 const valueChanged = (i, newVal) => 
 let updatedItems = [...items]
 updatedItems[i].title = newVal
 setItems(updatedItems)
 

 const addNew = () => 
 let newItems = [...items]
 newItems.push( key: randomStr(), title:'' )
 setItems(newItems)
 

 return <Fragment>
 <ItemList items=items valueChanged=valueChanged/>
 <button onClick=addNew>Add new</button>
 </Fragment>
 


 ReactDOM.render(<App/>, document.querySelector('#app'))


</script>

valueChanged is a closure which gets a fresh items every render. But your memo doesn't trigger an update because it only checks (o, n) => o.value === n.value. The event handler inside Item uses the old items value.

It can be fixed with functional updates:

const valueChanged = (i, newVal) => 
 setItems(oldItems => 
 let updatedItems = [...oldItems];
 updatedItems[i].title = newVal;
 return updatedItems;
 );

So valueChanged doesn't depend on items and doesn't need to be checked by memo.

Your code might have similar problems with other handlers. It is better to use functional updates whenener new value is based on the old one.

You can try initializing the state this way, I tried it on codesandbox and it may be the behavior you are looking for.

https://codesandbox.io/s/q8l6m2lj64

 const [items, setItems] = useState(() => [
 key: randomStr(), title: 'abc' ,
 key: randomStr(), title: 'def' ,
]);