Say I have a component with a long return statement.

const LongReturnComponent = () => {
  //lots of state
  return (
    .
    .
    .
    .
    .
    .
    .
    .
  )
}

Then I refactor it, for readability purposes into smaller functions inside that component’s body

const RefactoredComponent = () => {
   //lots of state
   const function1 = () => {
     .
     .
   }
   const function2 = () => {
     .
     .
   }
   return (
   <>
     {function1()}
     {function2()}
     .
     .
   </>
   )
}

Would there be a performance gain if I extracted function1 and function2 into separate React components, or rather, is that the standard practice? Does React differentiate between components written inside a component’s body vs a separate component? My intuition says yes but is it a significant improvement?

What’s holding me back from doing this is that I’d have to pass around 20 state variables down to the child components, and also type annotate the props so it gets messy real quick