Shallow vs. Deep merge in React.js

**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>