React and too many variables and logic in one component

[Mike Austin]

I try to keep my components under 300 lines, which is about 3 page. But they are still large, much of which are the callback events.

I've started moving all the events to hooks (use*), but in the same file – the benefit is they live outside the component function itself, adding some breathing room. Another benefit is that dependencies move with it, so I can remove other hooks that only events need. Last, I could move the event hooks to a separate file if the file just gets too large.

The drawback is adding types manually now that they can't be inferred, since I need to pass arguments to the hooks. At least I can just copy paste the type from VS Code.

const useHandleItemFormFieldChange = (
  setIsDueDateVisible: React.Dispatch<React.SetStateAction<boolean>>,
  currentItem?: Item
) => {

  const updateItem = useUpdateItemMutation();

  return useCallback((key: string, value: FieldValue) => {
    updateItem({
      id: currentItem?.id,
      input: {
        [key]: value
      }
    });
  }, [currentItem?.id, setIsDueDateVisible]);
};

And inside the component:

const handleBackButtonClick = useHandleBackButtonClick();
const handleItemFormFieldChange = useHandleItemFormFieldChange(setIsDueDateVisible, currentItem);

[Mike Austin]

I take back moving the events to hooks. Separating a component into a controller (container in React parlance) and view is a much better separation. This way I can keep all the events inline instead of having to create a hook for each one. It also separates out the view logic from the controller logic making each component simpler, and any modal dialogs can be presented in the controller leaving the view do only "one thing".