React Component Function Comparison - reactjs

Question

I have a form that has gotten really intense. Roughly 20 inputs that include multiple datepickers, google locations api, rrule values etc. Since very few of these inputs can update directly without going through some sort of a transform. I've successfully converted the component to from a stateful component that was doing way too much in the lifecycle methods (now using formik to manage values), but I'm trying to determine what the best way to define the necessary helper functions (e.g. updatedDateWithTime, formatAddress) in terms of performance and style, and can only think of a few options.
Option one: function expressions within the functional component:
const MyHugeForm = () => {
const helper1 = () => { console.log("thing1") }
const helper2 = () => {console.log("thing2") }
return() {...}
}
Option 2: as "globals" defined in the file, outside of the function:
helper1() => console.log("thing1");
helper2() => console.log("thing2");
const MyHugeForm = () => {
return() {...}
}
Option 3: as inline arrow functions used inside child components (i.e. break each input into it's own component and pass props down)
const MyHugeForm = (props) => {
return() {
<div>
<DateInput startDate={props.startDate} />
<LocationInput location={props.googleLocation} />
</div>
}
}
const DateInput = (props) => {
<DatePicker onChange={() => console.log("thing1")} />
}
const LocationInput = (props) => {
<input onChange={() => console.log("thing2")} />
}
It feels wrong to define 20 or so of these helper functions outside of (but in the same file as) the functional component, but defining them as function expressions inside the component seems worse and of the two options worse for performance. Breaking the pieces into child components feels like the right pattern in terms of reducing the complexity of a 600 line functional component, but if the children just end up defining the same functions inline in their renders, isn't it effectively the same?

Answer 1

My suggestion would be to create a helper class with some static methods where you can pass the input html events as parameters:
export default class MyHugeFormHelper {
static onChangeHandler(e) {
// do stuff here
}
static onInputHandler(e) {}
static onSubmit(e, callback) {
// you could pass a callback function from the logic of your component
}
}
Then in your component invoke this class method like this:
import MyHugeFormHelper from './MyHugeFormHelper';
const DateInput = (props) => {
<DatePicker onChange={MyHugeFormHelper.onChangeHandler} />
}