Event handlers

Ensure that your event handlers properly define their cleanup logic. Event handlers in useEffect callbacks should always return a cleanup function to prevent unexpected behaviour. For example, do this:

useEffect(() => {
  const handleClick = () => {
    // ... handle the click event
  };
 
  document.addEventListener("click", handleClick);
 
  return () => {
    document.removeEventListener("click", handleClick);
  };
}, []);

Instead of this:

useEffect(() => {
  const handleClick = () => {
    // ... handle the click event
  };
 
  document.addEventListener("click", handleClick);
 
  // Incorrect cleanup: Executes immediately, not when the component unmounts
  document.removeEventListener("click", handleClick);
}, []);

This is important because improper cleanup can lead to memory leaks and unexpected behaviour.

Event handler props should be prefixed with on and use camelCase:

// Good
<button onClick={handleClick} onMouseEnter={handleMouseEnter}>
 
// Avoid
<button clickHandler={handleClick} mouseenter={handleMouseEnter}>

The handling functions themselves should use the handle prefix:

// Good
const handleSubmit = (event) => { ... }
const handleInputChange = (event) => { ... }
 
// Avoid
const submit = (event) => { ... }
const inputChanged = (event) => { ... }

Be explicit with event parameters:

// Good
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { ... }
const handleClick = (event: MouseEvent<HTMLButtonElement>) => { ... }
 
// Avoid
const handleChange = (e) => { ... }
const handleClick = (x) => { ... }

Properly type your event handlers:

type ButtonProps = {
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
  children: ReactNode;
};
 
const Button = ({ onClick, children }: ButtonProps) => (
  <button onClick={onClick}>{children}</button>
);

Mutations and side effects Styling