Naming Functions in React Components

[ygrishajev]

Motivation

As the codebase scales, clarity in function naming becomes essential. Event handlers and internal logic functions inside components are frequently read and modified, so their names should communicate intent without requiring the reader to look at the implementation.

This RFC proposes guidelines to improve naming consistency and reduce ambiguity in component logic.

---

Problem Statement

Here’s a typical (but problematic) example:

const onSubmitClick = () => {
  // validation, callback calls, etc.
};

const handleClose = () => {
  // close modal, maybe cleanup
};

return (
  <div>
    <Button onClick={onSubmitClick}>Close</Button>
    <Button onClick={handleClose}>Save</Button>
  </div>
);

Issues:

• ❓ onSubmitClick and handleClose provide little insight into what actually happens.
• 🧠 Generic prefixes (on, handle) add noise rather than clarity.
• 👀 When reading the JSX, you can't tell what the buttons do.
• 🧱 As the codebase grows, these inconsistencies accumulate and slow down contributors.

---

Proposed Naming Rules

Use descriptive, outcome-focused names instead of generic, event-based names.

✅ Do

• Name functions based on what they do.
• Use verbs and clear intent.
• Avoid unnecessary prefixes.

❌ Don’t

• Use vague prefixes like on, handle, or do.
• Reference how or when the function is called instead of what it achieves.

---

Examples

❌ Before

const onSubmitClick = () => {
  // validation, API call, etc.
};

const handleClose = () => {
  // close modal
};

<Button onClick={onSubmitClick}>Close</Button>
<Button onClick={handleClose}>Save</Button>

✅ After

const validateAndSave = () => {
  // validation, API call, etc.
};

const closeModal = () => {
  // close modal
};

<Button onClick={validateAndSave}>Close</Button>
<Button onClick={closeModal}>Save</Button>

Now the JSX reads more like a sentence:

• "onClick validate and save" — makes sense immediately.
• "onClick close modal" — specific and predictable.

---

Rule Summary Table

Purpose	✅ Recommended	❌ Avoid
Validating form and saving	validateAndSave	onSubmitClick, handleSubmit
Closing a modal	closeModal	handleClose, doClose
Uploading profile picture	uploadProfileImage	onImageChange, handleUploadClick
Submitting a review	submitReview	handleReviewSubmit

---

Application Scope

• This rule applies to all functions declared inside components, especially:

  • Event handlers (onClick, onChange, etc.)
  • Internal logic functions triggered from UI interactions

• Third-party integration handlers (e.g. libraries like Formik or React Hook Form) may still require conventional names (e.g. handleSubmit) when bound to external APIs — use good judgment.

---

Migration Plan

• New code should follow this convention by default.
• Legacy code does not need to be refactored immediately but should be cleaned up when touched.

---

Open Questions

• Should this convention be enforced with a custom ESLint rule?
• Should we provide a utility script to scan and suggest renames?
• How do we handle naming consistency across teams?

---

Conclusion

Clarity scales. By giving functions meaningful names, we:

• Improve readability.
• Reduce context switching.
• Make JSX self-explanatory.
• Help future contributors navigate the code more efficiently.

[ade-tech]

Hello, I'm Abdone, How can I contribute to this

[Progress2002]

I connect with this proposal since I’ve often had to dig into implementations just to understand a function’s role. Clear naming rules would remove that friction, improve readability, and make collaboration smoother. I’d love to contribute to this effort—how can I get started or be part of the contribution process?

[MaxyTee]

Hello, I’m new to this community and interested in contributing. I want to be part of this platform to improve my skills, learn open-source collaboration, and contribute to meaningful projects.