Have you tried the first solution with {item.children && <Tree data={item.children} />} ? This would avoid creating intermediate empty nodes for all terminal nodes, and the rendered HTML is slightly smaller (no <! — react-empty: XX— >everywhere).