After using class components for some years, I embraced fully the new way of writing functional components and hooks. Instead of the deprecated componentWillReceiveProps where we compare a lot of props and write impossible to understand logic, we can write simple useEffects. Then I got into the issues related to unnecessary inline function declarations that occurred on re-render. This is the place where useCallback methods come. However, for a single component that is not trivial, a lot of segregated methods appeared, and this seem to me more difficult to follow than the old class way.
A short example:
const MyFuncComp = ({ prop1, prop2... }) => {
// must use useCallback otherwise onClickHandler etc. are computed at every render, when a prop changes
const onClickHandler1 = useCallback(() => { ... }, [dep1]};
...
const onChangeHandlerN = useCallback(() => ... };
/*** MANY useCallback /*
useEffect(() => {... }, [prop1]);
useEffect(() => {... }, [prop1, prop2]);
...
/*** MANY useEffect
>>>> this code doesn't look like JavaScript */
return <div>
<button onClick={onClickHandler1} />
<button onClick={onClickHandler2} />
...
<select onChange={onChangeHandler1}>...</select>
...
</div>;
}
Is there any way to better organise the code that I'm not aware?