<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.<br>
2.<br>
3.</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.10.1-f160547f47</p>
<p dir="auto">Call stack: at store_Store.getElementAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:21226:35)<br>
at store_Store.getElementIDAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:21242:26)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28678:63<br>
at List.render (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22934:18)<br>
at vi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13515:76)<br>
at ui (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13506:10)<br>
at mk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16077:86)<br>
at lk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15459:11)<br>
at kk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15451:23)<br>
at ck (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15435:5)</p>
<p dir="auto">Component stack: at List (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22629:30)<br>
at div<br>
at AutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:3003:5)<br>
at div<br>
at div<br>
at Tree_Tree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28429:47)<br>
at div<br>
at div<br>
at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28921:3)<br>
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27558:3)<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28206:3)<br>
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33383:52)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29219:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29336:32)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32934:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24322:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24811:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29404:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36207:3)</p>
<p dir="auto">I would also like to propose that following potentially improvements for speed and simplicity now that useState is there.</p>
<p dir="auto">I would like to propose the following variants, which introduce a modstamp and a setItem for state that contains list of items.<br>
Instead of having to destructor arrays and objects and things to cause reference changes, which is havey,<br>
setItem would implicit tick the mostamp for an item in an array and the modstamp if required at array container level.<br>
There would be alot less overhead in my mind to this approach that to setItem([...this.array]), causing new references to be created in the back ground, such that there is a reference change detected, such that item re-renders.<br>
if one wants to do a bulk update with more than a single item then setContent(this.array), which implicit, tick the mostamp.</p>
<p dir="auto">This would simplify things, because everything is basically reduce to a primative comparison or modstamp and no doesn't need to write deep ShouldComponentUpdate comparison anymore, as been take into account by useState.</p>
<p dir="auto">I think it is quite straint forward, obviously there would be all the logic in the background wrapping useState or using symbol and inject directly into an object. One just needs a GetContent the with out a modstamp for hitting API's.</p>
<p dir="auto">Typically this is just a concept, the function names and useState variants don't have to follow everything word for word names and that are menings less, its basically behavior, simplification that one is looking for, weather is with effects or which every.</p>
<p dir="auto">Typically UseState approach is much nicer, when having to setup, things, where on is linking into to nested structures of this.state, because updating them requires destructing of parent properties, such that they not lost.</p>
<p dir="auto"><strong>Continuous Scroll</strong><br>
In addition to this one also is there required the ability to not tick the timestamp when setContent is used, because when you working with controls where the is a data provide for like FlatList or things like that, where only UI items for screens space, while all data is not converted into controls, only the section for display. Typiclaly the documentation with regards to react-native is not correctly in how to use js for continuous scroll, as par last docs I read, cause full re-renders instead appends, for data off screen. Depends on weather you have a full screen of items or less basically. Basically flatList could also detect not just reference change, but array exceeding being below the minimum number of row  Items that would cover the screen. if is an append, well change is ignored. If update, then mostamps would have change for the person.</p>
<p dir="auto"><strong>CRUD system of changes</strong><br>
Basically you could also implement Create/Update/Delete item delta caching in the back ground for aggregation, which what I ultimate wanted to do in missive cad system, to reduce UI re-draw. I this case just before render, deltas are then merge before GetDerivedStateFromProps and render would be called.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
const modStamp = Symbol('modstamp');

enum UseStateType {
Primative,
ArrayObject,
Object
}


// Different function names could be used as well.
useState(type: UseStateType, initialcontent: TLookUpValueType, setMethod?: (value: TLookUpValueType) =&gt; void)) : any
useState(UseStateType.Primative, initialcontent: TLookUpValueType, setMethod?: (value: TLookUpValueType) =&gt; void)) : [
setContent, getContent]

useState(UseStateType.ArrayObject, initialcontent: TLookUpValueType, setMethod? :(value: TLookUpValueType) =&gt; void)) : [
setContent, setItem, ,getContent, getModStamp, tickModStamp]

useState(UseStateType.Object, initialcontent: TLookUpValueType, setMethod? :(value: TLookUpValueType) =&gt; void)) : [
setContent, setItem, ,getContent, getModStamp, tickModStamp] {

const setItem = (pos, item) =&gt; {
item[modStamp] = (this.state.array[pos][modStamp] || 0)++;
 this.state.array[pos] = item;
}

return [.., setItem, .. , ..];
}



render () {

return  &lt;React.Fragment&gt;
this.state.map(it =&gt; &lt;Item key={it.key} modStamp={it.modStamp} value={it}&gt;
&lt;/React.Fragment&gt;
}
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">modStamp</span> <span class="pl-c1">=</span> <span class="pl-smi">Symbol</span><span class="pl-kos">(</span><span class="pl-s">'modstamp'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">enum</span> <span class="pl-smi">UseStateType</span> <span class="pl-kos">{</span>
<span class="pl-c1">Primative</span><span class="pl-kos">,</span>
<span class="pl-c1">ArrayObject</span><span class="pl-kos">,</span>
<span class="pl-c1">Object</span>
<span class="pl-kos">}</span>


<span class="pl-c">// Different function names could be used as well.</span>
<span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s1">type</span>: <span class="pl-smi">UseStateType</span><span class="pl-kos">,</span> <span class="pl-s1">initialcontent</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">,</span> <span class="pl-en">setMethod</span>?: <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-k">void</span><span class="pl-kos">)</span><span class="pl-kos">)</span> : <span class="pl-s1">any</span>
<span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-smi">UseStateType</span><span class="pl-kos">.</span><span class="pl-c1">Primative</span><span class="pl-kos">,</span> <span class="pl-s1">initialcontent</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">,</span> <span class="pl-en">setMethod</span>?: <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-k">void</span><span class="pl-kos">)</span><span class="pl-kos">)</span> : <span class="pl-kos">[</span>
<span class="pl-s1">setContent</span><span class="pl-kos">,</span> <span class="pl-s1">getContent</span><span class="pl-kos">]</span>

<span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-smi">UseStateType</span><span class="pl-kos">.</span><span class="pl-c1">ArrayObject</span><span class="pl-kos">,</span> <span class="pl-s1">initialcontent</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">,</span> <span class="pl-en">setMethod</span>? :<span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-k">void</span><span class="pl-kos">)</span><span class="pl-kos">)</span> : <span class="pl-kos">[</span>
<span class="pl-s1">setContent</span><span class="pl-kos">,</span> <span class="pl-s1">setItem</span><span class="pl-kos">,</span> <span class="pl-kos">,</span><span class="pl-s1">getContent</span><span class="pl-kos">,</span> <span class="pl-s1">getModStamp</span><span class="pl-kos">,</span> <span class="pl-s1">tickModStamp</span><span class="pl-kos">]</span>

<span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-smi">UseStateType</span><span class="pl-kos">.</span><span class="pl-c1">Object</span><span class="pl-kos">,</span> <span class="pl-s1">initialcontent</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">,</span> <span class="pl-en">setMethod</span>? :<span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">TLookUpValueType</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-k">void</span><span class="pl-kos">)</span><span class="pl-kos">)</span> : <span class="pl-kos">[</span>
<span class="pl-s1">setContent</span><span class="pl-kos">,</span> <span class="pl-s1">setItem</span><span class="pl-kos">,</span> <span class="pl-kos">,</span><span class="pl-s1">getContent</span><span class="pl-kos">,</span> <span class="pl-s1">getModStamp</span><span class="pl-kos">,</span> <span class="pl-s1">tickModStamp</span><span class="pl-kos">]</span><span class="pl-kos"></span> <span class="pl-kos">{</span>

<span class="pl-k">const</span> <span class="pl-en">setItem</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">pos</span><span class="pl-kos">,</span> <span class="pl-s1">item</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
<span class="pl-s1">item</span><span class="pl-kos">[</span><span class="pl-s1">modStamp</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">array</span><span class="pl-kos">[</span><span class="pl-s1">pos</span><span class="pl-kos">]</span><span class="pl-kos">[</span><span class="pl-s1">modStamp</span><span class="pl-kos">]</span> <span class="pl-c1">||</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-c1">++</span><span class="pl-kos">;</span>
 <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">array</span><span class="pl-kos">[</span><span class="pl-s1">pos</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">item</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">return</span> <span class="pl-kos">[</span><span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">,</span> <span class="pl-s1">setItem</span><span class="pl-kos">,</span> <span class="pl-kos">.</span><span class="pl-kos">.</span> <span class="pl-kos">,</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>



<span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>

<span class="pl-k">return</span>  <span class="pl-kos">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Fragment</span><span class="pl-kos">&gt;</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">map</span><span class="pl-kos">(</span><span class="pl-s1">it</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-smi">Item</span> <span class="pl-s1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">it</span><span class="pl-kos">.</span><span class="pl-c1">key</span><span class="pl-kos">}</span> <span class="pl-s1">modStamp</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">it</span><span class="pl-kos">.</span><span class="pl-smi">modStamp</span><span class="pl-kos">}</span> <span class="pl-smi">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">it</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Fragment</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span></pre></div>