🧠 Senior React Developer Code Method

A practical guide for writing, structuring, and reviewing React (TypeScript) code like a senior developer — focusing on maintainability, scalability, and readability.

🧠 1. Architecture Before Code

Before writing code, answer:

What’s the component’s responsibility?
What’s static vs dynamic?
Where should data live? (local, context, or props)

Example

If your component renders tabs with static content (like AssistantMessage):

Keep UI logic in the component.
Move static data into a config file.

🧩 2. File Organization

Example clean structure:

components/
  Chat/
    index.ts
    ChatBubbles.tsx
    UserBubble.tsx
    AssistantMessage/
      index.ts
      AssistantMessage.tsx
      AnswerTab.tsx
      SourcesTab.tsx
      StepsTab.tsx
      RelatedQuestions.tsx
    data/
      steps.ts
      sources.ts
      relatedQuestions.ts

Each folder groups related logic and styles — easier to maintain, test, and extend.

🧱 3. Code Structure (Senior Template)

import { useState, useMemo } from 'react';
import type { FC } from 'react';
import { Button } from '@/components/ui/button';
import { IconName } from 'lucide-react';

interface Props {
  title: string;
  onClick?: () => void;
}

export const ExampleComponent: FC<Props> = ({ title, onClick }) => {
  // ✅ State
  const [active, setActive] = useState(false);

  // ✅ Derived data
  const buttonLabel = useMemo(() => (active ? 'Active' : 'Inactive'), [active]);

  // ✅ Handlers
  const handleClick = () => {
    setActive(prev => !prev);
    onClick?.();
  };

  // ✅ JSX
  return (
    <div className="flex items-center gap-3">
      <h2 className="text-lg font-semibold">{title}</h2>
      <Button onClick={handleClick} className="flex items-center gap-2">
        <IconName size={16} />
        {buttonLabel}
      </Button>
    </div>
  );
};

Key points:

Imports ordered: external → internal → types.
Types before component.
Hooks → derived → handlers → JSX.
Avoid inline anonymous functions.
Extract constants.

🧹 4. Maintainability Practices

✅ Do

Extract constants:
const DEFAULT_KEYWORDS = ['learn python', 'python basics'];
Use descriptive variable names.
Add JSDoc for complex functions.
Memoize heavy derived data.
Keep components under ~150 lines.

❌ Don’t

Hardcode arrays or configs inside components.
Mix UI logic and data fetching.
Use indexes as React keys.
Use any type.

♿ 5. Accessibility

Use semantic HTML (<button>, <ul>, <a>).
Add aria-expanded, aria-label.
Keyboard navigable.
Avoid clickable <div>s.

🔒 6. Security

Use rehype-sanitize in markdown.
Don’t inject raw HTML.
Sanitize clipboard & external input.

⚙️ 7. Performance

Use React.memo for pure components.
Lazy-load heavy UI (tabs, modals).
Wrap heavy arrays/objects in useMemo.
Keep re-render boundaries tight.

📄 8. Example: Refactored Markdown Component

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeSanitize from 'rehype-sanitize';
import { Copy } from 'lucide-react';

interface MarkdownProps {
  content: string;
}

export const Markdown: React.FC<MarkdownProps> = ({ content }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async (code: string) => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      alert('Copy failed');
    }
  };

  const CodeBlock: React.FC<{ inline?: boolean; children: React.ReactNode }> = ({
    inline,
    children,
  }) => {
    if (inline) return <code className="px-1 bg-muted rounded">{children}</code>;

    const code = String(children);
    return (
      <div className="relative group">
        <button
          onClick={() => handleCopy(code)}
          className="absolute top-2 right-2 bg-backgroundSecondary p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <Copy className="w-4 h-4" />
        </button>
        <pre className="rounded-md bg-backgroundSecondary px-4 py-2 overflow-x-auto">
          <code>{code}</code>
        </pre>
        {copied && <span className="absolute top-2 right-10 text-xs">Copied!</span>}
      </div>
    );
  };

  return (
    <ReactMarkdown
      rehypePlugins={[rehypeSanitize]}
      components={{
        code: ({ inline, children }) => <CodeBlock inline={inline}>{children}</CodeBlock>,
      }}
    >
      {content}
    </ReactMarkdown>
  );
};

🧭 9. Review Checklist Before PR

Category	What to Check
🧠 Logic	Single responsibility, clear naming
📦 Structure	Data extracted, code modular
🧹 Style	Consistent Tailwind & typography
⚙️ Performance	Memoization and clean rerenders
♿ Accessibility	Keyboard and aria labels
🛡️ Security	Sanitization and safe event handlers
🧪 Testing	Easy to test / no side effects

Senior React Developer Code Method

🧠 Senior React Developer Code Method

0 Comments