react table - useMemo vs useState - reactjs

Question

The react table documentation says that the data values should be memoized. However, in some of their examples on the site, they use useState instead of useMemo. Is useState already memoized? If not, what issues might I run into if the data is not memoized? (or how should it be done correctly when needing to change the data?) TIA!
documentation link with example of useState (link to code in case documentation link becomes 404 like a lot of old posts linking to old versions of react table documentation that I've come across)

Answer 1

I am not answering your question, but to show you the possible reason why they use useState against their Must be memoized statement.
Let's see react's documentation about useMemo & useState:
useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
useState Returns a stateful value, and a function to update it.
The first example is where the memoized dependencies rawData are passed down from its parent component and we want to customize the data by using expensiveMakeDataCalculation method. Here, the table data is renewed when changes of rawData are detected and we use useMemo for the sake of optimization, as the docs said.
function ExampleA({ rawData }) {
const data = useMemo(() => expensiveMakeDataCalculation(rawData), [rowData]);
...
}
But how if we want to fetch the data within the component? Yes, we can use useState to store our fetched data. As we know that rawData will always be the most recent state after applying updates and the memoized data will be renewed once rawData state changes.
function ExampleB({ initialData }) {
const [rawData, setRawData] = useState(initialData);
const data = useMemo(() => expensiveMakeDataCalculation(rawData), [rawData]);
// for example only
const onClick = (id) => {
try {
const res = await fetch(`url/${id}`);
const fetchedData = await res.json();
setRawData(fetchedData);
} catch (error) {
console.log(error);
}
}
...
}
Here, we can simplify the code as below. We do not use useMemo anymore, since we are confident that the expensiveMakeDataCalculation only runs when the onCLick method is called and the data state can be consumed immediately by your table. You can memoize the data by using useMemo, but I think it is not necessary.
function ExampleC({ initialData }) {
const [data, setData] = useState(initialData);
// for example only
const onClick = (id) => {
try {
const res = await fetch(`url/${id}`);
const rawData = await res.json();
const calculatedData = expensiveMakeDataCalculation(rawData);
setData(calculatedData);
} catch (error) {
console.log(error);
}
}
...
}
So, based on the above example, we can have new insight into how this example works and know the reason why the example uses useState over their Must be memoized statement. Here, the expensiveMakeDataCalculation is called inside setData setter and only runs when updateMyData method called.
const [data, setData] = React.useState(() => makeData(20))
const updateMyData = (rowIndex, columnId, value) => {
...
setData(old =>
// expensiveMakeDataCalculation. expensive? yes if you have a lot of rows data
old.map((row, index) => {
if (index === rowIndex) {
return {
...old[rowIndex],
[columnId]: value,
}
}
return row
})
)
}