Using Array or Map with React useCallback

[BrianHung]

How does one pass an observable / computed array or map into useCallback? Mobx docs say to use observable to wrap components and or convert observable into plain objects. However, using observable doesn't work when trying to use mobx data with a third-party react library that I don't control.

The particular library I'm using indirectly takes mobx data via useCallback.

const { nodes } = state.doc 
const getNodes = useCallback(id => nodes[id].data, [nodes]);
// This does not re-render when nodes is deeply mutated.
return <Component getNodes={getNodes}/>

As a hack, I'm using JSON.stringify to trigger MST to re-render. Is there a more mobx-native way to trigger a read within a react useCallback?

const { nodes } = state.doc 
const getNodes = useCallback(id => nodes[id].data, [JSON.stringify(nodes)]);
// Re-renders when node is mutated as stringify triggers a deep read.
return <Component getNodes={getNodes}/>

[EmilTholin]

Hi @BrianHung!

Do you think you could include a minimal, reproducible example in e.g. a CodeSandbox? It's difficult to say what might go wrong without seeing some real code.

[BrianHung]

@EmilTholin Sorry for taking so long to get back to you.

https://codesandbox.io/s/friendly-david-yt0y3f?file=/src/App.js:0-2960

backup source code

import DataEditor, { GridCellKind } from "@glideapps/glide-data-grid";
import "@glideapps/glide-data-grid/dist/index.css";
import { types, getRoot } from "mobx-state-tree";
import { values, trace } from "mobx";
import { useCallback, useEffect } from "react";
import { observer } from "mobx-react-lite";

const Col = types
  .model("Col", {
    id: types.identifier,
    order: types.number,
    title: types.string
  })
  .views((self) => ({
    get cells() {
      return values(getRoot(self).cells).filter((cell) => cell.col === self);
    }
  }));

const Row = types
  .model("Row", {
    id: types.identifier,
    order: types.number
  })
  .views((self) => ({
    get cells() {
      return values(getRoot(self).cells).filter((cell) => cell.row === self);
    }
  }));

const Cell = types
  .model("Cell", {
    id: types.identifier,
    row: types.reference(types.late(() => Row)),
    col: types.reference(types.late(() => Col)),
    text: types.string
  })
  .actions((self) => ({
    setText(text) {
      self.text = text;
    }
  }))
  .views((self) => ({
    get value() {
      return self.text + "!";
    }
  }));

const Grid = types
  .model("Grid", {
    rows: types.map(Row),
    cols: types.map(Col),
    cells: types.map(Cell)
  })
  .actions((self) => ({
    afterCreate() {
      trace(self, "cells");
    }
  }));

const cols = Array.from({ length: 5 }, (_, i) => ({
  id: crypto.randomUUID(),
  order: i,
  title: String.fromCharCode(i + "A".charCodeAt(0))
}));

const rows = Array.from({ length: 5 }, (_, i) => ({
  id: crypto.randomUUID(),
  order: i
}));

const cells = Array.from({ length: 25 }, (_, i) => ({
  id: crypto.randomUUID(),
  row: rows[i % 5].id,
  col: cols[(i / 5) >> 0].id, // integer division,
  text: "" + ((i / 5) >> 0) + (i % 5)
}));

const arrayToObject = (array) =>
  Object.fromEntries(
    array.reduce((map, obj) => map.set(obj.id, obj), new Map()).entries()
  );

const grid = Grid.create({
  cells: arrayToObject(cells),
  cols: arrayToObject(cols),
  rows: arrayToObject(rows)
});

export const App = observer(() => {
  trace(true);

  const columns = values(grid.cols);
  const rows = values(grid.rows).length;

  const getCellContent = useCallback(
    ([col, row]) => {
      const cell = columns[col].cells[row];
      return {
        kind: GridCellKind.Text,
        data: cell.text,
        allowOverlay: true,
        displayData: cell.text
      };
    },
    [
      // Uncomment this to work.
      // JSON.stringify(grid.cells)
    ]
  );

  useEffect(() => {
    setTimeout(() => columns[0].cells[0].setText("hello"), 50);
  }, []);

  return (
    <div>
      <DataEditor
        getCellContent={getCellContent}
        onCellEdited={([col, row], { data }) =>
          columns[col].cells[row].setText(data)
        }
        columns={columns}
        rows={rows}
        smoothScrollX={true}
      />
      <div id="portal" />
    </div>
  );
});

export default App;

Here, we can see an issue with integrating mobx with a third-party library where we can't use the observer HoC. The library in example is glide-data-grid which uses useCallback to selectively get data from the mobx store to itself which it renders virtually.

An important thing to note is that glide-data-grid does not render React nodes for each cell, instead using canvas; so we can't use Observer to cleanly hook into React mount and unmount lifecycle and start and stop observing an observable.

Ideally, any time the observables (that are used in the callback) update, the callback itself is reconstructed. Not sure how to do that with mobx. Looking for something like Observer but for generic data, e.g.

const getCellContent = observeData(
  ([col, row]) => {
      const cell = columns[col].cells[row];
      return {
        kind: GridCellKind.Text,
        data: cell.text,
        allowOverlay: true,
        displayData: cell.text
      };
    }
);

// instead of
const renderCell = ([col, row]) => <Observer>{columns[col].cells[row].text}</Observer>

Right now what we do is reconstruct the callback using the JSON.stringify hack, which isn't efficient when the data observed via the callback is only a small portion of the overall data in mobx.

A second note is that JSON.stringify(cols) doesn't work because cells is a computed property of a Col, and computed props aren't included in the serialization of the Col.