React

Lesson 03

Derived state

Compute values from current props and state instead of syncing duplicates.

Good Code

ReviewerList.tsx
type Reviewer = {
  id: string;
  name: string;
  approved: boolean;
};

export function ReviewerList({ reviewers }: { reviewers: Reviewer[] }) {
  // Derived values can be computed from current props during render.
  const approvedCount = reviewers.filter((reviewer) => reviewer.approved).length;

  return <p>{approvedCount} of {reviewers.length} reviewers approved.</p>;
}

Bad Code

ReviewerList.tsx
import { useEffect, useState } from "react";

type Reviewer = {
  id: string;
  name: string;
  approved: boolean;
};

export function ReviewerList({ reviewers }: { reviewers: Reviewer[] }) {
  const [approvedCount, setApprovedCount] = useState(0);

  // Duplicated state needs an effect just to stay synchronized.
  useEffect(() => {
    setApprovedCount(reviewers.filter((reviewer) => reviewer.approved).length);
  }, [reviewers]);

  return <p>{approvedCount} of {reviewers.length} reviewers approved.</p>;
}

Review Notes

What to review

Good Code

The good version derives the count from the current reviewers prop during render, so there is only one source of truth.

Bad Code

The bad version stores a duplicate count and then uses an effect to keep it synchronized with props.

Takeaways

  • Prefer render-time derived values when state can be calculated from existing data.