0

An issue I find myself having with code layout in my React components is that I end up having to define too many handlers.

I generally write only functional components with hooks, but within the body of the component function I find myself having to define a bunch of child functions, e.g. for a SignInDialog~

const onSignIn = (event) => { ... };

const onCreateAccount = (event) => { ... };

const onResetPassword = (event) => { ... };

And each of these might be dozens of lines long, so the component starts to grow. In a different part of my UI, I have this~

const onClick = (event) => { ... };

const onMouseEnter = (event) => { ... };

const onMouseLeave = (event) => { ... };

const onContextMenu = (event) => { ... };

const onDoubleClick = (event) => { ... };

This just feels crazy! It ends up being hundreds of lines, because there's a lot going on when these handlers trigger. I could write it as a class-based component instead but that really wouldn't change much - it would amount to the same bloated file regardless of whether they're methods on a class or functions defined in a functional component.

The trouble is, I can't really just extract them to a ComponentUtils file because they almost uniformly depend on being able to alter the component's state. So I'd end up having to pass a series of value/setValues as params to each handler, and that would be messy as hell too.

Is there a good solution to this?

3
  • 1
    "The trouble is, I can't really just extract them to a ComponentUtils file" - make a number of smaller, encapsulated React components instead, with well-defined inputs and outputs, and well-defined responsibilities, and build your larger component out of that? Commented Feb 24, 2023 at 7:59
  • 2
    This is in no way React specific. Typical GUI dialogs require a lot of event handlers simply because there are a lot of possible events to handle - regardless of the GUI framework one uses. IMHO this is intrinsic to the problem.
    – Doc Brown
    Commented Feb 24, 2023 at 12:29
  • With a whopping whole ONE React app under my belt, I am far from an expert, but my advice is that you only have an actual problem with your design if you feel yourself failing to meet deadlines for changes/fixes because the component is so large you keep getting lost and losing your place. Breaking the component down into sub-components just to keep their line length down seems like a bad idea to me because then you'll have to pass that state/behavior around each of them and that was honestly the hardest part of React for me to learn.
    – GHP
    Commented Feb 24, 2023 at 22:11

1 Answer 1

2

This just feels crazy! It ends up being hundreds of lines, because there's a lot going on when these handlers trigger.

It may sound like too much, but for a component that implements some complex functionality, a few hundred lines of well-written, commented, code sounds like a reasonable amount.

There are some forms of technical debt that can inflate the size of a source file beyond what is reasonable. You can check for those issues and resolve them:

  • Single responsibility: Does your component have a single thing that it is responsible for, or is it responsible for multiple things (A and B).

    In the latter case, consider splitting your component in 3. One with responsibility for doing A, one with responsibility for B and the third for coordinating/dispatching events to the other two. This might increase the number of components and total size of your project, but reduces the size of individual components.

  • Duplicated code: If there are event handlers that have an overlapping set of actions to perform, refactor the common actions into a separate function of the component.

    That not only reduces the line count, it also reduces the number of places where you have to make a change to fix a bug in those common actions.

Note that a CommonUtils file is only helpful if you have helper functions that are useful to and needed by multiple components. You should first refactor common code into component-specific functions and only after that can you start looking for common helper functions across components.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.