Tengo un proveedor que recibe prop data , lo pone en un estado. Además, hay algunos métodos para manipular ese estado.

Paso el estado y la propiedad de data a los consumidores, pero cada vez que cambio el estado, no hay diferencia entre la propiedad y el estado. Quiero poder ver qué cambió para poder actualizar ese valor.

 import { createContext, useContext, useEffect, useState } from "react"; const TableContext = createContext({ data: [], headings: [], onChangeCellContent: () => {}, }); const TableProvider = ({ data, headings, children }) => { const [tableData, setData] = useState(data); const [tableHeadings, setHeadings] = useState(headings); useEffect(() => { setData((previousData) => { return data.length !== previousData.length ? data : previousData; }); }, [data]); const onChangeHeadingCell = ({ key, value }) => { setHeadings((oldHeadings) => oldHeadings.map((heading) => { if (heading.key === key) { heading.title = value; } return heading; }) ); }; const onChangeCellContent = ({ rowId, cellKey, value }) => { setData((previousData) => [...previousData].map((row) => { if (row.id === rowId) { row[cellKey] = value; return row; } return row; }) ); }; const onAddNewRow = (rowData) => { setData((oldData) => [...oldData, rowData]); }; return ( <TableContext.Provider value={{ tableData, data, onChangeCellContent, onChangeHeadingCell, onAddNewRow, headings: tableHeadings, }} > {children} </TableContext.Provider> ); }; export default TableProvider; export const useTable = () => { const context = useContext(TableContext); if (context === "undefined") { throw Error("Table provider missing"); } return context; };

Aquí está el controlador de cambios, funciona, pero también cambia los datos originales:

 const Row = ({ data: row}) => { const { onChangeCellContent, headings, data } = useTable(); ... // GIVES ME THE SAME VALUE WHEN I TRIGGER ONCHANGE console.log(row.value, data.find((s) => s.id === row.id).value); return <tr><td><select className="w-full h-full focus:outline-none" style={{ backgroundColor: "inherit", }} value={row.value} onChange={(e) => onChangeCellContent({ rowId: row.id, cellKey: "value", value: e.target.value, }) } >...</select></td></tr>