How to Comment in React

React uses two comment styles: standard JavaScript comments in your component logic, and JSX comments inside markup. Use the right one for where your comment sits in the file.

What you’ll build or solve

You’ll add comments to React code without breaking JSX. Done means your editor and build tool accept the comment syntax, and your component still renders.

When this approach works best

This approach works best when:

• You want to explain tricky component logic or a non-obvious decision.
• You need to leave a short note for a teammate during a review.
• You want to temporarily hide a JSX element while debugging layout.

This is a bad idea if you keep large blocks of commented-out code long term. Remove dead code and rely on version control instead.

Prerequisites

• A React project (or any file that uses JSX)
• Basic JavaScript familiarity

No extra tools required.

Step-by-step instructions

Step 1: Use JavaScript comments in component logic

Use JavaScript comment syntax anywhere you are writing normal JavaScript, such as functions, hooks, handlers, and helper utilities.

Single-line comments use //:

// Calculates the total price of all items
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

Multi-line comments use /* ... */:

/*
  Loads profile data once on mount.
  Keeps the UI responsive by avoiding repeated calls.
*/
function loadProfile() {
  // ...
}

These work inside React components and outside them.

Step 2: Use JSX comments inside JSX markup

Inside JSX markup, use curly braces with a block comment: {/* ... */}.

function App() {
  return (
    <div>
      {/* This is a JSX comment */}
      <h1>Hello</h1>
    </div>
  );
}

Do not use // directly inside JSX markup. JSX expects expressions, and // will cause a syntax error.

What to look for

JavaScript comments (// or /* */) work in regular JavaScript parts of the file.

JSX comments ({/* */}) work inside JSX markup.

Commenting out JSX elements uses the same JSX syntax:

function App() {
  return (
    <div>
      {/* <button>Disabled</button> */}
      <button>Enabled</button>
    </div>
  );
}

Hooks use standard JavaScript comments:

import { useEffect } from "react";

function Profile() {
  useEffect(() => {
    // Fetch data on mount
    fetch("/api/profile");
  }, []);

  return <div>Profile</div>;
}

Conditional JSX still uses JSX comment syntax in the markup:

function Banner({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <>
          {/* Shown to signed-in users */}
          <p>Welcome back!</p>
        </>
      ) : (
        <>
          {/* Shown to guests */}
          <p>Please sign in.</p>
        </>
      )}
    </div>
  );
}

Examples you can copy

Example 1: Comment a helper function

// Formats a number like 1200 into "1,200"
export function formatNumber(value) {
  return new Intl.NumberFormat("en-US").format(value);
}

Example 2: Comment inside JSX

function UserCard({ user }) {
  return (
    <section>
      {/* Profile header */}
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </section>
  );
}

Example 3: Temporarily hide a JSX block

function Actions() {
  return (
    <div>
      {/* <button>Delete account</button> */}
      <button>Save changes</button>
    </div>
  );
}

Common mistakes and how to fix them

Mistake 1: Using // directly inside JSX

What you might do:

function App() {
  return (
    <div>
      // Breaks JSX
      <h1>Hello</h1>
    </div>
  );
}

Why it breaks:

JSX does not allow // inside markup, it expects a valid expression.

Correct approach:

function App() {
  return (
    <div>
      {/* Works in JSX */}
      <h1>Hello</h1>
    </div>
  );
}

Mistake 2: Writing a block comment without curly braces in JSX

What you might do:

function App() {
  return (
    <div>
      /* Missing braces */
      <h1>Hello</h1>
    </div>
  );
}

Why it breaks:

JSX requires comments to be inside {}.

Correct approach:

function App() {
  return (
    <div>
      {/* Correct JSX comment */}
      <h1>Hello</h1>
    </div>
  );
}

Mistake 3: Leaving large commented blocks in production

What you might do:

Comment out whole components or old layouts and leave them in the file.

Why it causes problems:

Large commented sections make files harder to read and maintain.

Correct approach:

Delete unused code and keep older versions in git history.

Troubleshooting

If you see Unexpected token, check that JSX comments use {/* ... */} and that braces match.

If the file fails to compile right after adding a comment, check that the comment is inside a valid JSX location.

If a JSX element will not comment out cleanly, wrap the whole element in one JSX comment:

{/* <Component /> */}

If your formatter removes comments, check lint and formatting rules in your project.

Quick recap

• Use // and /* ... */ in regular JavaScript logic.
• Use {/* ... */} inside JSX markup.
• Comment out JSX elements with {/* <Element /> */}.
• Avoid keeping large commented-out blocks in committed code.