playbooks

home / skills / bankkroll / skills-builder / react

react skill

/skills/react

This skill helps you locate React official docs and tutorials, guiding you through concepts, hooks, and patterns with authoritative references.

npx playbooks add skill bankkroll/skills-builder --skill react

Review the files below or copy the command above to add this skill to your agents.

Files (75)
SKILL.md
12.4 KB
---
name: "react"
description: "Scraped from https://react.dev/ Source: https://react.dev. Use when questions involve: blog, community, docs, learn, link, reference."
---

# React

> Official documentation: https://react.dev

## Overview

This skill provides comprehensive documentation for react.

**Total references:** 74 files (~444,708 tokens)

**Topics covered:**
Whats New in React 18, Setting Up Compilation, Asset Loading, A single source of truth for each state, See also, React 18 for Application Developers, State Hooks, Improvements in React 19, Concurrent Stores, Effects react to reactive values, Resource APIs, Adopt React Compiler incrementally...

## Reference Files

Load only the reference files relevant to the user's question:

### Blog

- **[Not Found and more](references/blog-1.md)** (~6,650 tokens)
  - Topics: Whats coming in React 18, A gradual adoption strategy, Working with the community
- **[React v18.0 and more](references/blog-2.md)** (~6,822 tokens)
  - Topics: What is Concurrent React, Gradually Adopting Concurrent Features, Suspense in Data Frameworks
- **[Introducing react.dev and more](references/blog-3.md)** (~6,173 tokens)
  - Topics: tldr, New site new domain new homepage, Going all-in on modern React with Hooks
- **[React Canaries: Enabling Incremental Feature Rollout Outside Meta and more](references/blog-4.md)** (~4,683 tokens)
  - Topics: tldr, How React features are usually developed, Can we just do more minor releases
- **[React 19 Upgrade Guide](references/blog-5.md)** (~4,379 tokens)
  - Topics: Installing, Codemods, Breaking changes
- **[React v19 and more](references/blog-6.md)** (~6,999 tokens)
  - Topics: Whats new in React 19, New React DOM Static APIs, React Server Components
- **[React Compiler Beta Release and more](references/blog-7.md)** (~7,350 tokens)
  - Topics: Try React Compiler Beta today, We recommend everyone use the React Compiler linter today, Backwards Compatibility
- **[Sunsetting Create React App](references/blog-8.md)** (~3,298 tokens)
  - Topics: Deprecating Create React App, How to Migrate to a Framework, How to Migrate to a Build Tool
- **[React Labs: View Transitions, Activity, and more](references/blog-9.md)** (~6,914 tokens)
  - Topics: View Transitions, Activity, React Performance Tracks
- **[React 19.2 and more](references/blog-10.md)** (~7,148 tokens)
  - Topics: New React Features, New React DOM Features, Notable Changes
- **[Critical Security Vulnerability in React Server Components and more](references/blog-11.md)** (~2,865 tokens)
  - Topics: Immediate Action Required, Update Instructions, Timeline

### Community

- **[Acknowledgements and more](references/community-1.md)** (~7,800 tokens)
  - Topics: Past contributors, Additional Thanks, Upcoming Conferences
- **[Versioning Policy and more](references/community-2.md)** (~4,079 tokens)
  - Topics: Stable releases, All release channels, React Conf 2024

### Docs

- **[Not Found and more](references/docs.md)** (~300 tokens)

### General

- **[Not Found and more](references/general-1.md)** (~6,877 tokens)
  - Topics: Code of Conduct, Stack Overflow, Popular Discussion Forums
- **[React Versions](references/general-2.md)** (~1,433 tokens)
  - Topics: Latest version 192, Previous versions, Changelog

### Learn

- **[Add React to an Existing Project and more](references/learn-1.md)** (~5,782 tokens)
  - Topics: Using React for an entire subroute of your existing website, Using React for a part of your existing page, Using React Native in an existing native mobile app
- **[Choosing the State Structure and more](references/learn-2.md)** (~7,174 tokens)
  - Topics: Principles for structuring state, Group related state, Avoid contradictions in state
- **[Creating a React App and more](references/learn-3.md)** (~7,391 tokens)
  - Topics: Full-stack frameworks, Other frameworks, Start From Scratch
- **[Extracting State Logic into a Reducer and more](references/learn-4.md)** (~6,858 tokens)
  - Topics: Consolidate state logic with a reducer, ComparinguseStateanduseReducer, Writing reducers well
- **[Keeping Components Pure](references/learn-5.md)** (~2,389 tokens)
  - Topics: Purity Components as formulas, Side Effects unintended consequences, Where youcancause side effects
- **[Lifecycle of Reactive Effects](references/learn-6.md)** (~6,065 tokens)
  - Topics: The lifecycle of an Effect, Effects react to reactive values, Recap
- **[Managing State and more](references/learn-7.md)** (~6,009 tokens)
  - Topics: Reacting to input with state, Ready to learn this topic, Choosing the state structure
- **[Passing Data Deeply with Context and more](references/learn-8.md)** (~6,076 tokens)
  - Topics: The problem with passing props, Context an alternative to passing props, Using and providing context from the same component
- **[Preserving and Resetting State](references/learn-9.md)** (~6,700 tokens)
  - Topics: State is tied to a position in the render tree, Same component at the same position preserves state, Different components at the same position reset state
- **[Queueing a Series of State Updates and more](references/learn-10.md)** (~7,625 tokens)
  - Topics: React batches state updates, Updating the same state multiple times before the next render, Recap
- **[Reacting to Input with State and more](references/learn-11.md)** (~5,783 tokens)
  - Topics: How declarative UI compares to imperative, Thinking about UI declaratively, Recap
- **[Removing Effect Dependencies](references/learn-12.md)** (~7,064 tokens)
  - Topics: Dependencies should match the code, Removing unnecessary dependencies, Recap
- **[Render and Commit and more](references/learn-13.md)** (~6,736 tokens)
  - Topics: Step 1 Trigger a render, Step 2 React renders your components, Step 3 React commits changes to the DOM
- **[Reusing Logic with Custom Hooks](references/learn-14.md)** (~6,815 tokens)
  - Topics: Custom Hooks Sharing logic between components, Passing reactive values between Hooks, When to use custom Hooks
- **[Scaling Up with Reducer and Context and more](references/learn-15.md)** (~7,507 tokens)
  - Topics: Combining a reducer with context, Moving all wiring into a single file, Recap
- **[Sharing State Between Components and more](references/learn-16.md)** (~6,533 tokens)
  - Topics: Lifting state up by example, A single source of truth for each state, Recap
- **[State as a Snapshot](references/learn-17.md)** (~2,139 tokens)
  - Topics: Setting state triggers renders, Rendering takes a snapshot in time, State over time
- **[Synchronizing with Effects](references/learn-18.md)** (~8,196 tokens)
  - Topics: What are Effects and how are they different from events, You might not need an Effect, How to write an Effect
- **[Thinking in React](references/learn-19.md)** (~3,771 tokens)
  - Topics: Start with the mockup, Step 1 Break the UI into a component hierarchy, Step 2 Build a static version in React
- **[Tutorial: Tic](references/learn-20.md)** (~13,601 tokens)
  - Topics: Setup for the tutorial, Overview, Completing the game
- **[Using TypeScript and more](references/learn-21.md)** (~5,421 tokens)
  - Topics: Installation, TypeScript with React Components, Example Hooks
- **[Updating Arrays in State and more](references/learn-22.md)** (~7,387 tokens)
  - Topics: Updating arrays without mutation, Updating objects inside arrays, Recap
- **[Writing Markup with JSX](references/learn-23.md)** (~1,752 tokens)
  - Topics: JSX Putting markup into JavaScript, Converting HTML to JSX, The Rules of JSX
- **[You Might Not Need an Effect](references/learn-24.md)** (~7,472 tokens)
  - Topics: How to remove unnecessary Effects, Recap, Try out some challenges
- **[Your First Component](references/learn-25.md)** (~1,690 tokens)
  - Topics: Components UI building blocks, Defining a component, Using a component

### Link

- **[hydrateRoot and more](references/link.md)** (~4,661 tokens)
  - Topics: Reference, Usage, Troubleshooting

### Reference

- **[React Performance tracks and more](references/reference-1.md)** (~7,715 tokens)
  - Topics: Usage, Tracks, Rule Details
- **[set and more](references/reference-2.md)** (~8,002 tokens)
  - Topics: Rule Details, Common Violations, Troubleshooting
- **[cache and more](references/reference-3.md)** (~4,651 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[Children and more](references/reference-4.md)** (~5,333 tokens)
  - Topics: Reference, Usage, Alternatives
- **[Component](references/reference-5.md)** (~10,374 tokens)
  - Topics: Reference, Usage, Alternatives
- **[Built and more](references/reference-6.md)** (~6,540 tokens)
  - Topics: Built-in components, Your own components, Reference
- **[forwardRef and more](references/reference-7.md)** (~6,557 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[memo and more](references/reference-8.md)** (~5,738 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[<StrictMode> and more](references/reference-9.md)** (~7,660 tokens)
  - Topics: Reference, Usage, Reference
- **[use and more](references/reference-10.md)** (~7,709 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useContext and more](references/reference-11.md)** (~5,861 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useEffect](references/reference-12.md)** (~7,395 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useEffectEvent and more](references/reference-13.md)** (~6,258 tokens)
  - Topics: Reference, Usage, Reference
- **[useMemo and more](references/reference-14.md)** (~6,817 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useReducer and more](references/reference-15.md)** (~5,605 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useState and more](references/reference-16.md)** (~7,381 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[useTransition](references/reference-17.md)** (~4,322 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[<ViewTransition> and more](references/reference-18.md)** (~7,663 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[use no memo and more](references/reference-19.md)** (~6,329 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[hydrateRoot and more](references/reference-20.md)** (~2,676 tokens)
  - Topics: Reference, Usage, Troubleshooting
- **[Common components (e.g. <div>)](references/reference-21.md)** (~8,082 tokens)
  - Topics: Reference, Usage
- **[<form> and more](references/reference-22.md)** (~7,592 tokens)
  - Topics: Reference, Usage, Reference
- **[<meta> and more](references/reference-23.md)** (~7,632 tokens)
  - Topics: Reference, Usage, Reference
- **[<title> and more](references/reference-24.md)** (~7,382 tokens)
  - Topics: Reference, Usage, Common components
- **[hydrate and more](references/reference-25.md)** (~6,386 tokens)
  - Topics: Reference, Usage, Reference
- **[renderToPipeableStream](references/reference-26.md)** (~4,036 tokens)
  - Topics: Reference, Usage
- **[renderToReadableStream and more](references/reference-27.md)** (~7,790 tokens)
  - Topics: Reference, Usage, Reference
- **[Server React DOM APIs and more](references/reference-28.md)** (~7,845 tokens)
  - Topics: Server APIs for Web Streams, Server APIs for Nodejs Streams, Legacy Server APIs for non-streaming environments
- **[Server Functions and more](references/reference-29.md)** (~7,477 tokens)
  - Topics: Usage, Usage, Reference
- **['use server' and more](references/reference-30.md)** (~7,252 tokens)
  - Topics: Reference, Usage, Components and Hooks must be idempotent

### Tutorial

- **[Not Found](references/tutorial.md)** (~36 tokens)

### Warnings

- **[react](references/warnings.md)** (~245 tokens)
  - Topics: ReactDOMTestUtilsact warning, Rest of ReactDOMTestUtils APIS

## Usage Guidelines

1. **Identify relevant sections** - Match the user's question to the appropriate reference file(s)
2. **Load minimally** - Only read files directly relevant to the question to conserve context
3. **Cite sources** - Reference specific sections when answering
4. **Combine knowledge** - For complex questions, you may need multiple reference files

### When to use each reference:

- **Blog**: Blog-related features and documentation
- **Community**: Community-related features and documentation
- **Docs**: Docs-related features and documentation
- **General**: General documentation, overview, and getting started
- **Learn**: Learn-related features and documentation
- **Link**: Link-related features and documentation
- **Reference**: Reference-related features and documentation
- **Tutorial**: Tutorial-related features and documentation
- **Warnings**: Warnings-related features and documentation

Overview

This skill provides a concise, searchable surface of the official React documentation from react.dev, aggregated for quick reference. It focuses on docs, learning guides, blog posts, community notes, link and API references to help answer practical React questions. Use it to locate authoritative guidance, migration notes, and implementation patterns quickly.

How this skill works

The skill inspects the react.dev content mapped by topic (blog, community, learn, docs, link, reference) and returns targeted passages and summaries relevant to the query. It highlights usage guidance, API semantics, migration steps, and recommended patterns drawn from official pages so you can act on accurate, up-to-date guidance. When needed it stitches together related sections (e.g., hooks + lifecycle + performance) for a complete answer.

When to use it

  • You need an authoritative explanation of a React API (useState, useEffect, useReducer, etc.).
  • You want migration or upgrade guidance for React 18/19 features and breaking changes.
  • You’re learning recommended component, state, or effect patterns from the official docs.
  • You need blog context: feature announcements, deprecations, or roadmap details.
  • You want community-oriented info: versioning policy, contributors, or conferences.
  • You require usage examples or troubleshooting tips for server and client rendering APIs.

Best practices

  • Match the question to one of the main topics (learn, reference, blog, community) before searching.
  • Prefer the reference pages for exact API behavior and the learn guides for patterns and examples.
  • When upgrading versions, consult blog upgrade guides for codemods and breaking change steps.
  • Combine a reference API snippet with a learn guide example to form production-ready code.
  • Ask for specific context (browser vs. server, framework vs. vanilla) to get precise recommendations.

Example use cases

  • Explain the difference between useState and useReducer with examples and when to choose each.
  • Summarize migration steps from React 18 to React 19 with notable breaking changes and codemods.
  • Show how to add React to an existing site for a single subroute and provide recommended setup.
  • Provide canonical usage and troubleshooting for hydrateRoot, renderToReadableStream, or server APIs.
  • Recommend patterns for lifting state, Context usage, and preserving component state across renders.

FAQ

Is this content the official React documentation?

The content is aggregated from react.dev and presents official guidance and examples, but this skill is a curated interface rather than the official site itself.

How do I get code examples for a specific hook or API?

Ask for the hook or API name and the execution context (client, server, TypeScript). The skill will return authoritative usage snippets and common troubleshooting tips.