Maximum call stack size exceeded in react app

Describe the bug

export const Tree: FC<TreeProps> = (props) => { 
  const keyToNodeMap = useRef<KeyToNodeMap>({})
  const [data, setData] = useState<TreeSource>(props.treeData)
  const doTranslate = useCallback((children: Array<TreeSource>, parent: TreeSource)=>{
    children.forEach((item: TreeSource) => {
      item.parent = parent
      keyToNodeMap.current[item.key] = item
      if(item.children && item.children.length > 0) {
        doTranslate(item.children, item)
      }
    })
  }, [])

  useEffect(() => {
    keyToNodeMap.current[data.key] = data
    if(data.children && data.children.length > 0) {
      // doTranslate(data.children, data)        **open this will report the bug** 
    }
  }, [data, doTranslate])

  return (
    <div className={sc('tree')}> 
      <div className={sc('tree-nodes')}>
        <TreeNode
          data={data}
          onCollapse={onCollapse}
          onCheck={onCheck}
        />
      </div>
    </div>
  )
}
export default Tree;

When the page is loaded for the first time, it is fine, but when I switch the sidebar, an error will be reported

    "@storybook/addon-a11y": "^6.3.2",
    "@storybook/addon-actions": "6.3.2",
    "@storybook/addon-docs": "^6.3.2",
    "@storybook/addon-essentials": "^6.3.2",

To Reproduce

My Project:

https://github.com/ChocolateUI/chocolate-ui/blob/8f30fc55be25ce49cef938fd0427d5759d74077b/src/components/Tree/tree.tsx#L72

System macOS 11.2.3 chrome 91.0.4472.114

Additional context Add any other context about the problem here.

[fikyair]

This part of the reconstruction has been completed, it is a problem with my code, thank you all

[fikyair]

hello @fikyair, do you have a repository we can check to reproduce this? I tend to share @marko-hologram’s idea but seeing the project altogether can be really helpful

https://github.com/ChocolateUI/chocolate-ui/blob/8f30fc55be25ce49cef938fd0427d5759d74077b/src/components/Tree/tree.tsx#L72 I found out that item.parent = parent in doTranslate triggered the circular reference

Great that you found the issue! I guess you can close this GitHub issue now since everything is resolved?

wait a moment, I will refactor the code and then give you a reply