with-react

React Code Style Guide

This guide outlines modern React patterns to improve readability, maintainability, and predictability in your components.

---

1. Treat UIs as Thin Wrappers Over Data

• Avoid useState for anything that can be derived from props or global state.
• Use useState only when the value is truly local and reactive.

// Prefer
const isVisible = props.status === 'open'

// Avoid
const [isVisible, setIsVisible] = useState(false)

---

2. Flatten UI State into Derived Calculations

• If the UI state can be computed, avoid storing it.

const isFormDisabled = !formData.name || !formData.email

---

3. Prefer State Machines Over Multiple useStates

• Use a state machine to model UI flows with clear transitions.

// Pseudo code with a basic state machine model
const [state, transition] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')

function onSubmit() {
  transition('loading')
  sendRequest()
    .then(() => transition('success'))
    .catch(() => transition('error'))
}

return (
  <>
    {state === 'idle' && <Form onSubmit={onSubmit} />}
    {state === 'loading' && <Spinner />}
    {state === 'success' && <SuccessMessage />}
    {state === 'error' && <ErrorMessage />}
  </>
)

// For complex flows, consider XState
const [state, send] = useMachine(myFormMachine)

if (state.matches('loading')) return <Spinner />

---

4. Extract Logic-Heavy JSX into Components

• Avoid deeply nested ternaries or conditionals in JSX.
• Encapsulate logic in dedicated components.

// Prefer
return <UserView user={user} />

// Avoid
return user ? (
  user.isAdmin ? <AdminPanel /> : <UserPanel />
) : (
  <LoadingIndicator />
)

---

5. Avoid Implicit Logic in useEffect

• Avoid logic that reacts indirectly via dependencies.
• Prefer deriving the value directly.

// Prefer
const shouldShowBanner = user.hasSubscription && !user.dismissedBanner

// Avoid
useEffect(() => {
  if (user.hasSubscription && !user.dismissedBanner) {
    showBanner()
  }
}, [user])