title: React.memo not re render if props change
body: <p>I'm trying to create a Table component from scratch using React memo component as rows to prevent unecessary re-rendering.
  The rows cells is an array of React components created from a children function with row data, row id, row index and a commitChange function as parameters.
  The commitChange function is used to set the Table state from a row.
  This is the code:</p>
  <pre><code>&lt;Table data={[{name: 1}, {name: 2}]}&gt;
              {({data, index, id, commitChange})=&gt;
                  [
                  &lt;div&gt;Name: {data.name}&lt;/div&gt;,
                  &lt;TextBox value={data.name} onChange={(value)=&gt;commitChange('name', parseInt(value, 10))}/&gt;,
                  &lt;TextBox value={data.place}/&gt;
                  ]
              }
   &lt;/Table&gt;
  </code></pre>
  <p>TableComponents.jsx</p>
  <pre><code>export const Table = ({ data: initialData, maxRows = 10, children: makeChildren, primaryKey = 'ID' }) =&gt; {
  const [TableData, setTableData] = useState(initialData);
  console.log('table re-render')
  
  useEffect(() =&gt; {
      console.log('---&gt;table data', TableData)
  }, [TableData]);
  
  useEffect(() =&gt; {
      setTableData(initialData)
  }, [initialData]);
  
  const renderCells = useCallback((param) =&gt; {
      return makeChildren(param)
  }, [])
  
  const commitChange = useCallback((field, value, index) =&gt; {
      setTableData(prevTableData =&gt; {
          const newState = Array.from(prevTableData)
          newState[index][field] = value
          return [...newState]
      })
  }, [])
  
  const renderRows = () =&gt; {
      return TableData.map((row, i) =&gt;
          &lt;TableRow
              key={row[primaryKey]}
              index={i}
              rowData={row}
              cells={renderCells}
              id={row[primaryKey]}
              updateTableData={commitChange}
          /&gt;
      )
  }
  
  //
  return (
      &lt;table&gt;
          &lt;tbody&gt;
              {
                  renderRows()
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
    );
  }
  
  const TableRow = React.memo(({ index, rowData, cells, id, updateTableData }) =&gt; {
  
  console.log('render row' + index, rowData)
  
  useEffect(() =&gt; {
      console.log('row ' + index + ' data', rowData)
  }, [rowData])
  
  
  const renderCells = () =&gt; {
      return cells({ data: rowData, index, id, commitChange: (field, value) =&gt; updateTableData(field, value, index) }).map((c, i) =&gt; {
          return (
              &lt;td key={i}&gt;
                  {c}
              &lt;/td&gt;
          )
      })
  }
  
  return (
      &lt;tr&gt;
          {renderCells()}
      &lt;/tr&gt;
  )
  })
  </code></pre>
  <p>When an element was added to the data props on the Table component the table re-render and render only the added row and this works ok.</p>
  <p>But when a row element is edit from the textbox in the second cell the data on the parent Table component was correctly updated but the row not re-render.
  When I check the previus and next proprieties passed to component with React.memo areEqual function (<a href="https://reactjs.org/docs/react-api.html#reactmemo" rel="nofollow noreferrer">Documentation here</a>) the data proprieties is the same.
  The table component is re-render when TableData is update by row and the renderRows function is executed but without re-render of the updated row.</p>
  <p>What is the problem? Thanks for help</p>
  <p><em>P.S No I don't want an external library to make custom Table elements</em></p>