9 Practical JSX Tips to Write Cleaner React Code

JSX looks like HTML with a bit of JavaScript sugar; anyone can write it, but writing clean and efficient JSX requires a handful of practical tricks. The following nine tips are simple yet decisive for improving readability and component flexibility.

1. Concatenate multiple class names with clsx

Instead of string concatenation that becomes unreadable with many conditions:

<div className={'btn ' + (active ? 'active' : '') + ' ' + size}>

use clsx (only ~200 bytes):

import clsx from 'clsx';
<div className={clsx('btn', { active }, size)}>

This one‑line solution cleanly handles all conditional classes.

2. Be careful with short‑circuit rendering

Writing {list.length && <List />} will render the number 0 when the list is empty, leaving an unwanted "0" in the DOM.

Correct approaches:

{list.length > 0 && <List />}
{!!list.length && <List />}

Explicitly convert the length to a boolean to prevent 0 from appearing.

3. Extract deep ternary chains

Nested ternaries become hard to read:

{status === 'loading' ? <Loading />
 : status === 'error' ? <Error />
 : status === 'empty' ? <Empty />
 : <List data={data} />}

Refactor into a function:

const renderContent = () => {
  if (status === 'loading') return <Loading />;
  if (status === 'error') return <Error />;
  if (status === 'empty') return <Empty />;
  return <List data={data} />;
};
return <div>{renderContent()}</div>;

Or use an object map for elegance:

const map = { loading: <Loading />, error: <Error />, empty: <Empty /> };
return map[status] || <List data={data} />;

4. Forward props with ...rest

When building a component, passing each prop individually is tedious. Use the rest operator to forward remaining props:

function Input({ label, error, ...rest }) {
  return (
    <div>
      <label>{label}</label>
      <input {...rest} />
      {error && <span>{error}</span>}
    </div>
  );
}

This lets callers provide custom labels, error messages, and any native input attributes such as placeholder or onChange.

5. Use children (compound components) instead of generic props

Avoid stuffing content into generic title or content props. Prefer a composable API:

// Bad
<Card title="Title" content="Content" />

// Good
<Card>
  <Card.Title>Title</Card.Title>
  <Card.Body>Content</Card.Body>
</Card>

Children give the component far greater flexibility.

6. Extract constant inline styles

Creating a new style object on every render defeats memo optimizations: <Box style={{ padding: 12 }} /> Define the style once outside the component:

const boxStyle = { padding: 12 };
<Box style={boxStyle} />;

Apply the same principle to any array or object literals used in JSX.

7. Wrap JSX comments in curly braces

HTML‑style comments ( <!-- -->) or comments placed inside a tag’s attribute list are invalid. Use:

return (
  <div>
    {/* This is a JSX comment */}
    <Header />
  </div>
);

All JSX comments must be inside {}.

8. Use fragment shorthand to avoid extra DOM nodes

Wrapping a component tree in an unnecessary <div> adds unwanted layers that can break flex or grid layouts. React provides fragments:

return (
  <>
    <Header />
    <Main />
    <Footer />
  </>
);

If a key is needed, use the full form:

<React.Fragment key={id}>…</React.Fragment>.</p>
<h2>9. Write boolean attributes concisely</h2>
<p>In JSX, specifying the attribute name alone sets it to <code>true

, mirroring native HTML:

// Verbose
<button disabled={true}>Submit</button>

// Clean
<button disabled>Submit</button>

Only write {condition} when the value is dynamic, e.g., <button disabled={isSubmitting}>Submit</button>. These nine small tricks collectively make JSX code more readable and components more flexible, narrowing the gap between beginners and seasoned React developers.