Default expand on tree?

[proddy]

Does anyone know how to set the default mode on a tree to expand all the rows?

I do this now using an useEffect() calling tree.fns.onAddAll(data.map((item) => item.id)) which is called when the page loads, but it's kinda funky and you can see it flipping from the default collapse mode.

[nuelst]

1. Best Approaches

Using initialState

const INITIAL_STATE = {
  expanded: data.map(item => item.id)
};

const tree = useTree(
  data,
  {
    state: INITIAL_STATE
  },
);

Using getState

const tree = useTree(
  data,
  {
    getState: (state) => ({
      ...state,
      expanded: data.map(item => item.id)
    })
  },
);

2. Why This Happens

The "flash" occurs because:

1. React renders initial collapsed state
2. useEffect runs after mount
3. State updates
4. Component re-renders

3. Better Solutions

Cleaner useEffect (if needed)

const tree = useTree(data);

useEffect(() => {
  // Use requestAnimationFrame to prevent flash
  requestAnimationFrame(() => {
    tree.fns.onAddAll(data.map(item => item.id));
  });
}, [data]); // Depend on data

Pre-processing Data

// Helper to expand all nodes
const expandAllNodes = (items) => {
  return items.map(item => ({
    ...item,
    expanded: true,
    children: item.children ? expandAllNodes(item.children) : []
  }));
};

// Process data before passing to table
const expandedData = expandAllNodes(data);

const tree = useTree(expandedData);

4. Best Practices

1. Prefer declarative approaches (initialState/getState)
2. Avoid side effects when possible
3. Consider performance with large datasets
4. Test with different data volumes

5. Combined Approach (if needed)

const INITIAL_STATE = {
  expanded: data.map(item => item.id)
};

const tree = useTree(
  data,
  {
    state: INITIAL_STATE,
    getState: (state) => ({
      ...state,
      expanded: data.map(item => item.id)
    })
  },
);

Key Points:

1. Avoid useEffect if possible
2. Use initial state when you can
3. Consider performance implications
4. Test with various data sizes

The initialState or getState approaches are recommended because they:

1. Are more declarative
2. Avoid side effects
3. Prevent visual "flash"
4. More performant

Choose based on your specific needs and data structure.

[proddy]

wow, thanks @mannuelst for that comprehensive reply!

I tried the suggestions and sadly it didn't work for me. Perhaps because I'm using preact (and not native react)?

There is no expanded in the tree library as I could find, so I had to replace this with ids like:

  const INITIAL_STATE = {
    ids: data.map((item) => item.id)
  };;

But you still get the refresh "flash", also with using the useEffect() with a requestAnimationFrame() call.

Also I don't have a getState function. Is that something from redux?