addressing >
There are two patterns to avoid:
Creating functions that return JSX like renderThing() -> this was taken
already addressed in https://github.com/twentyhq/twenty/pull/10011
Making a hook that "stores" all the logic of a component - > this PR is
addressing this particular pattern
In essence, handlers should remain in the component and be connected to
their events.
And everything in a handler can be abstracted into its dedicated hook.
For example:
const { myReactiveState } =
useRecoilValue(myReactiveStateComponentState);
const { removeThingFromOtherThing } = useRemoveThingFromOtherThing();
const handleClick = () => {
if (isDefined(myReactiveState)) {
removeThingFromOtherThing();
}
}
Broadly speaking, this is how you can split large components into
several sub-hooks.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
252922b522