Middle
Is it possible to provide external access to the component's methods in a functional component (to give 'handles' outside)?
sobes.tech AI
Answer from AI
In React functional components, you can provide external access to component methods using forwardRef and useImperativeHandle.
This allows you to "pass through" a ref and define which methods or properties will be accessible from outside.
Example:
import React, { useImperativeHandle, forwardRef, useState } from 'react';
const MyComponent = forwardRef((props, ref) => {
const [count, setCount] = useState(0);
useImperativeHandle(ref, () => ({
increment() {
setCount(c => c + 1);
},
reset() {
setCount(0);
}
}));
return <div>Count: {count}</div>;
});
// Usage
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();
Thus, external code can call the increment and reset methods of the component.