**Prerequisites **for this article – fundamentals of React.js
Intro
When it's required to keep only single state as primitive of string , number , or any relevant , there is no need to use deep merge approach , conversely – make use of shallow merge
. However for more complex scenarios , when previous state mostly required to be preserved i.e. not overwritten – as in case of shallow merge which overwrites , the following i.e. deep merge
stays per recommendation and even requirement to use . Just like in functional component good practice is too copy a state and only then modify it (indirect mutation a.k.a. deep merge) rather than passing value instead function as direct mutation (a.k.a. shallow merge) , same logic applies when objects used for initial render and , of course , for subsequent re-render Compared with containers (objects, arrays) , primitives are relatively insensitive to direct mutations . Let's examine a couple of examples conceptually without digging too much into React.js code theory itself . First examples shows classic approach : the argument passed as value rather than function callback , next example will consider the opposite . Keep in mind both examples pivots around primitive value being modified for the imaginative Counter component . Consider the initial state for both Examples 1 & Example 2 utilizing useState hook
as follows :
Let's practice
const [counter, setCounter] = useState(0);
Example 1
setCounter(counter + 1) // shallow (not recommended)
Example 2
setCounter(prevCounterState => prevCounterState + 1) // deep (recommended) ...
// .., especially when heavy computations might be foreseen)
Note : Although Example 2 takes precedence over Example 1 as recommendation , both examples technically would work 'cause hereby primitive over data structure (container) used
Now as we revised the shallow vs. deep
merge for primitive such as number , let's consider similar logic applied with an object supplied as value with some sub-values (properties) within . Let's consider the following Example 3 :
Example 3
import {useState} from 'react'
const App = () => {
const [clicks, setClicks] = useState( {
left: 0, right: 0,
} )
const handleLeftClick = ()=> {
/* clicks commented out to produce uncommon behaviour */
setClicks( {/* ...clicks, */left: clicks.left + 1} )
}
const handleRightClick = ()=> {
/* (...object spread operator used to copy last value [deep merge]) */
setClicks( {...clicks , right: clicks.right + 1} )
}
return (
<div>
<button onClick={handleLeftClick}>Left click {clicks.left}</button>
<button onClick={handleRightClick}>Right click {clicks.right}</button>
</div>
)
}
export default App;
Example 3 in detail:
Now what happens if e.g. Left click
pressed a few times first : within a first few click Left click
gets incremented by 1, 2, 3,.. etc. , from which the very first click of Left click
changes the Right click
value from 0
to undefined
(more precisely number zero just disappears) . Why this happens , is because if Left click
pressed it does not copy path properties of left & right , accessing and modifying only left : from that moment no more property of right : value
exists as was set initial . This demonstrates that sharing properties misbehaviour might be atomic – no way to get back and fix it . Of course this is mocked scenario as I commented ...
click's spread operator
value out on purpose ! Within this moment technically we can continue incrementing Left click
by + 1s , but if Right click
pressed for the first time ever , it gets NaN
: from JS perspective everything seems to be clear i.e. undefined + 1
gives you NaN
( just the way it is ) , but what is happening in terms of perspective of React.js which recommends (more precisely requires pureness within state change) says about it ? Because technically initially both object spread operators evaluated and assigned for each handleLeftClick & handleRightClick
, from which the following i.e.handleRightClick
expects both object values (left and right) even if only one of those will be modified within respective handler , so what happens next when we press Right click
for state to change, the Right click
expects property of right: 0
to be accessible which due to to initial click on the Left click
did disappear . What does it tell us about overall ? It tries to tell that direct (a.k.a. shallow merge) which overwrites the very last state , is not a best practice if more than one (sub-)value within container (in this case – object) used . First direct mutable sate clicks of Left click
kinda did "eliminated" the right: 0
sub-value (property) from the object which subsequently resulted into NaN
as we tried to add 1 (+1) to already non existing property of the object . If this is clear enough , hopefully it is , you may ask what would happened if Right click
gets clicked for the very first time instead – opposite scenario . Well pretty much interesting thing happens tho . Instead of writing one more paragraph try by oneself [source] .
The final example tries to touch same logic applied to object but with an array container , this time no NaN
or similar produced , so no worries , I won't get into greater detail , rather just touch the surface of the following :
Example 4
import {useState} from 'react'
const App = () => {
const [left, setLeft] = useState(0)
const [right, setRight] = useState(0)
const [allClicks, setAll] = useState([])
const handleLeftClick = ()=> {
setAll(allClicks.concat('L'))
// (...array spread operator used to copy last value [deep merge]))
// & is equivalent to setAll([...allClicks, 'L'])
setLeft(left + 1)
}
const handleRightClick = ()=> {
setAll(allClicks.concat('R'))
// otherwise equivalent to :..
// setAll([...allClicks, 'R'])
setRight(right + 1)
}
return (
<div>
<button onClick={handleLeftClick}>Left click {left}</button>
<button onClick={handleRightClick}>Right click {right}</button>
<p>{allClicks.join(' ')}</p>
</div>
)
}
export default App;
Same logic has been followed : first of all 1) copy the state , only when the state copied , 2) modify it ! In this case it's done with array-like spread operator
or .concat()
, keeping in mind .push()
would do the job for shallow merge
which mostly not a case we want to do , instead merge it deeply preserving data by modifying it indirectly ! That's all folks .
If any typos found and (or) suggestions could be made, please leave it in the comment section below . Thank you and see you in the next one !
Related references>
Top comments (0)