Should i pass functions to my component manually or using ref attribute?

Question

I have built my own FormBuilder component (which is almost 5k line now), so it can cover all my needs, one issue i'm encountering is loading a new set of FormData any time the user needs, since my FormBuilder can accept a set of nested components, its kinda hard comparing the changes, and handling everything in component did mount, one easy way is building a loadFormData method inside the FormBuilder and calling this method from outside the component
I know this can easily be accomplished using ref attribute, but react highly suggest avoiding this and i got discouraged! and i was not sure if i should do this or not!
So i came up with a new alternative which kinda does the same thing:

class A {

    onGetFormBuilderInternalFunction = (functions) => {
        this.formBuilderFunctions = functions
    }

    onLoadButtonClick = () => {        
      this.formBuilderFunctions.loadFormData(someNewData)
    }

    render () {
        <FormBuilder onGetInternalFunction={this.onGetFormBuilderInternalFunction}
    }
}


class FormBuilder {
    componentDidMount() {
        if (this.props.onGetInternalFunction) {
            this.props.onGetInternalFunction({
                loadFormData: this.loadFormData,
            })
        }
    }
}  

So what do you think ?, is this a better approach ? or is this still a bad one ?, i was thinking using this method will at least only gives access to functions i need and not everything else.
I should also mention, loadFormData is simply one example, and there are at least a couple of these special function which i really really think is best to simply call from outside, so even if i do somehow pass the new data from props and handle it in componentDidUpdate, for the rest of these functions, i still need to access the FormBuilder

Answer 1

Yes that is the correct way to do it. However, if you have a 5,000 line component I would strongly suggest breaking it up into smaller sub components.

Answer 2

Keep state and handler functions in Parent and pass it down to FormBuilder as props.