No curly brackets causing 'RangeError: Maximum call stack size exceeded'. Can someone tell why?

Question

I'm using useFieldArray of React Hook Form, and what I'm trying to do is on useEffect load array from database to multiple tool fields each. But the code below gives the RangeError: Maximum call stack size exceeded unless I put curly braces around both content = '' and content in the function. Like addTool({content}) and so on. And I don't have any idea why

Not works:

const addTool = (content = '') => {
    toolAppend({ name: content })
  }

projData.tool.map((content, index) => {
        addTool(content)
      })

Works:

const addTool = ({content = ''}) => {
    toolAppend({ name: content })
  }

projData.tool.map((content, index) => {
        addTool({content})
      })

Answer 1

The useFieldArray functions (append, remove etc.) quickly throws a Maximum call stack size exceeded error if the data handled by your form is malformed.

const inner = {}

const outer = {
  first: inner,
  nested: {
    // referencing the same object twice will crash,
    //  same as circular structures.
    second: inner   
  },
  someAction: () => {} // functions will also crash
}

It's a bit hard to tell what the exact problem in your case is/was, but there maybe was superfluous data on your tool entries, which got removed by destructuring them.

TL;DR

Make sure the data handled by your form doesn't contain anything "fancy": circular structures, referencing the same object multiple times, functions...