reactjs - Is drilling down setSate() through multiple components an anti-pattern in React?

Question

I am new with React development and I wonder if this is considered an anti-pattern to pass down setState hook as props.

My code looks like this:

const App = () => {
  const [value, setValue] = useState('')

  return (
    <Component value={value} helpers={{ setValue }} />
  )
}

const Component = (props) => {
  return <Component2 {...props} />
}

const Component2 = (props) => {
  return <Input {...props} />
}

const Input = (props) => {
  const handleChange = (e) => props.helpers.setValue(e.target.value)
  return <input onChange={handleChange}  {...props} />
}

I am working with React-Hook-Form and I need to declare the state at the top level but I still want my handleChange function to be at the component level. However, I don't see this pattern on example codes.

Is it an anti-pattern?

Answer 1

等待大神答复