¿Cuál es la forma óptima de transformar un mapa plano a una estructura de datos anidada utilizando React.js?

He estado reflexionando sobre la mejor manera de manejar la agrupación en mi aplicación. Es una aplicación de edición de video y estoy introduciendo la capacidad de agrupar capas. Si estás familiarizado con Figma u otros programas de diseño/edición de video, sabrás que generalmente existe la capacidad de agrupar capas.

Para mantenerlo simple en la aplicación, los datos de video son un mapa:

const map = {
  "123": {
    uid: "123",
    top: 25,
    type: "text"
  },
  "345": {
    uid: "345",
    top: 5,
    type: "image"
  },
  "567": {
    uid: "567",
    top: 25,
    type: "group",
    children: ["345", "123"]
  }
}

Luego, estoy agrupándolos dentro de una función de renderización (esto parece costoso):

const SomeComponent = () => {
  const objects = useMemo(() => makeTrackObjects(map), [map]);

  return (
    <div>
      {objects.map(object => {
        return <div>Alguna capa que cambiará los datos causando re-renderizaciones</div>
      })}
    </div>
  )
}

Aquí está la función que realiza la agrupación:

const makeTrackObjects = (map) => {
  // convierte el mapa en un array
  const objects = Object.keys(map).map((key) => ({ ...map[key] }));

  // array plano de todos los objetos que se agruparán por su clave/id
  const objectsInGroup = objects
    .filter((object) => object.type === "group")
    .map((object) => object.children)
    .flat();

  // filtrar los objetos que están anidados/agrupados
  const filtered = objects.filter((object) => !objectsInGroup.includes(object.uid))

  // insertar objetos como hijos durante la renderización
  const grouped = filtered.map((object) => {
      const children = object.children
        ? {
            children: object.children
              .map((o, i) => {
                return {
                  ...map[o]
                };
              })
              .flat()
          }
        : {};

  return {
    ...object,
    ...children
  };
});

// los datos principales están planos pero ahora anidados para la interfaz de usuario. ¿Esto es ineficiente?
  return grouped
}

Idealmente me gustaría mantener los datos planos, tengo mucho código que tendría que actualizar para profundizar en los datos. Es agradable tenerlos planos y utilizar transformadores solo cuando sea necesario.

La pregunta principal es si esto tiene sentido, si es eficiente, y si no lo es, ¿por qué?