title: Prevent react from rerendering, when object values gets changed from another key but same object
body: <p>Here are the code:</p>
  <p><strong>Matrix.jsx</strong></p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import MatrixSelectRow from &quot;./MatrixSelectRow&quot;;
  import _ from &quot;lodash&quot;;
  
  const Matrix = () =&gt; {
    const [uncheckedColArr, setUncheckedColArr] = useState({});
  
    useEffect(() =&gt; {
      console.log(&quot;uncheckedColArr&quot;, uncheckedColArr);
    }, [uncheckedColArr]);
  
    const searchRowArr = {
      building_number: [&quot;---&quot;, &quot;1-1&quot;, &quot;1-2&quot;, &quot;1-3&quot;, &quot;1-4&quot;],
      unit_number: [&quot;---&quot;, &quot;12&quot;, &quot;34&quot;, &quot;56&quot;, &quot;75&quot;],
      &quot;65577&quot;: [&quot;---&quot;, &quot;10&quot;, &quot;20&quot;, &quot;30&quot;],
      &quot;65560&quot;: [&quot;---&quot;, &quot;8&quot;, &quot;16&quot;, &quot;32&quot;],
      &quot;655761&quot;: [&quot;---&quot;, &quot;12&quot;, &quot;24&quot;, &quot;36&quot;]
    };
  
    const unitTypeCount = 9351;
    const unitSqftCount = 9251;
    const amListOnly = [&quot;65577&quot;, &quot;65560&quot;, &quot;655761&quot;];
  
    const updateFilterValue = (columnName, fieldValue, checked) =&gt; {
      let tempUncheckedColArr = { ...uncheckedColArr };
      if (tempUncheckedColArr[columnName] === undefined) {
        tempUncheckedColArr[columnName] = [];
      }
  
      //if clicked on select all checkbox
      if (fieldValue === &quot;---&quot;) {
        if (checked) {
          tempUncheckedColArr[columnName] = [];
        } else {
          //if unchecked add all the vales from that column to unCheckedArr
          tempUncheckedColArr[columnName] = searchRowArr[columnName];
        }
      } else {
        tempUncheckedColArr[columnName] = _.xor(tempUncheckedColArr[columnName], [
          fieldValue
        ]);
      }
  
      setUncheckedColArr(tempUncheckedColArr);
    };
  
    return (
      &lt;MatrixSelectRow
        searchRowArr={searchRowArr}
        unitTypeCount={unitTypeCount}
        unitSqftCount={unitSqftCount}
        amListOnly={amListOnly}
        updateFilterValue={updateFilterValue}
        uncheckedColArr={uncheckedColArr}
      /&gt;
    );
  };
  
  export default Matrix;
  
  </code></pre>
  <p><strong>MatrixSelectRow.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import MatrixSelectCol from &quot;./MatrixSelectCol&quot;;
  import _ from &quot;lodash&quot;;
  
  const MatrixSelectRow = ({
    searchRowArr,
    unitTypeCount,
    unitSqftCount,
    amListOnly,
    updateFilterValue,
    uncheckedColArr
  }) =&gt; {
    const toggleFilterValue = (columnName, fieldValue, checked) =&gt; {
      updateFilterValue(columnName, fieldValue, checked);
    };
  
    if (_.isEmpty(searchRowArr)) {
      return &quot;Loading...&quot;;
    }
  
    return (
      &lt;div&gt;
        &lt;MatrixSelectCol
          searchArr={searchRowArr[&quot;building_number&quot;]}
          colName={&quot;building_number&quot;}
          toggleFilterValue={toggleFilterValue}
          currentColUnchecedArr={
            uncheckedColArr[&quot;building_number&quot;] !== undefined &amp;&amp;
            uncheckedColArr[&quot;building_number&quot;]
              ? uncheckedColArr[&quot;building_number&quot;]
              : []
          }
        /&gt;
        &lt;MatrixSelectCol
          searchArr={searchRowArr[&quot;unit_number&quot;]}
          colName={&quot;unit_number&quot;}
          toggleFilterValue={toggleFilterValue}
          currentColUnchecedArr={
            uncheckedColArr[&quot;unit_number&quot;] !== undefined &amp;&amp;
            uncheckedColArr[&quot;unit_number&quot;]
              ? uncheckedColArr[&quot;unit_number&quot;]
              : []
          }
        /&gt;
  
        {amListOnly.map((am_id, i) =&gt; {
          return (
            &lt;MatrixSelectCol
              key={am_id}
              searchArr={searchRowArr[am_id]}
              colName={am_id}
              toggleFilterValue={toggleFilterValue}
              currentColUnchecedArr={
                uncheckedColArr[am_id] !== undefined &amp;&amp; uncheckedColArr[am_id]
                  ? uncheckedColArr[am_id]
                  : []
              }
            /&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export default MatrixSelectRow;
  
  </code></pre>
  <p><strong>MatrixSelectCol</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  const MatrixSelectCol = ({
    searchArr,
    colName,
    toggleFilterValue,
    currentColUnchecedArr = []
  }) =&gt; {
    console.log(&quot;col rendered &gt;&gt;&quot;, colName);
  
    const handleChange = () =&gt; {
      console.log(&quot;clicked&quot;);
      const fieldValue = &quot;1-1&quot;;
      const checked = false;
      const columnName = &quot;building_number&quot;;
      toggleFilterValue(columnName, fieldValue, checked);
    };
  
    return (
      &lt;div className=&quot;fixed-row&quot;&gt;
        &lt;span&gt;th data&lt;/span&gt;
        &lt;button className=&quot;dummy&quot; onClick={handleChange}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  export default React.memo(MatrixSelectCol);
  
  </code></pre>
  <p>Issue:</p>
  <p>When ever I click on button, I am updating the <code>uncheckedColArr</code>, but I am updating only <code>uncheckedColArr['building_number']</code>, so when only <code>building_number</code> is changed I don't want to rerender other columns such as <code>unit_number, 65577, 65560, 65561</code>. But, its rerendering.</p>
  <p>I do not want to re-render any other column except <code>building_number</code> here. Here, is the <a href="https://codesandbox.io/s/so-rerender-forked-zi51ut" rel="nofollow noreferrer">sandbox link</a>.</p>