name	react
description	React framework for building user interfaces. Use for React components, hooks, state management, JSX, and modern frontend development.

React Skill

Comprehensive assistance with react development, generated from official documentation.

When to Use This Skill

This skill should be triggered when:

Working with react
Asking about react features or APIs
Implementing react solutions
Debugging react code
Learning react best practices

Quick Reference

Common Patterns

Pattern 1: API ReferenceComponentsThe built-in browser component lets you render different kinds of form inputs. Reference Usage Displaying inputs of different types Providing a label for an input Providing an initial value for an input Reading the input values when submitting a form Controlling an input with a state variable Optimizing re-rendering on every keystroke Troubleshooting My text input doesn’t update when I type into it My checkbox doesn’t update when I click on it My input caret jumps to the beginning on every keystroke I’m getting an error: “A component is changing an uncontrolled input to be controlled” Reference To display an input, render the built-in browser component. See more examples below. Props supports all common element props. formAction: A string or function. Overrides the parent

for type="submit" and type="image". When a URL is passed to action the form will behave like a standard HTML form. When a function is passed to formAction the function will handle the form submission. See . You can make an input controlled by passing one of these props: checked: A boolean. For a checkbox input or a radio button, controls whether it is selected. value: A string. For a text input, controls its text. (For a radio button, specifies its form data.) When you pass either of them, you must also pass an onChange handler that updates the passed value. These props are only relevant for uncontrolled inputs: defaultChecked: A boolean. Specifies the initial value for type="checkbox" and type="radio" inputs. defaultValue: A string. Specifies the initial value for a text input. These props are relevant both for uncontrolled and controlled inputs: accept: A string. Specifies which filetypes are accepted by a type="file" input. alt: A string. Specifies the alternative image text for a type="image" input. capture: A string. Specifies the media (microphone, video, or camera) captured by a type="file" input. autoComplete: A string. Specifies one of the possible autocomplete behaviors. autoFocus: A boolean. If true, React will focus the element on mount. dirname: A string. Specifies the form field name for the element’s directionality. disabled: A boolean. If true, the input will not be interactive and will appear dimmed. children: does not accept children. form: A string. Specifies the id of the this input belongs to. If omitted, it’s the closest parent form. formAction: A string. Overrides the parent for type="submit" and type="image". formEnctype: A string. Overrides the parent for type="submit" and type="image". formMethod: A string. Overrides the parent for type="submit" and type="image". formNoValidate: A string. Overrides the parent for type="submit" and type="image". formTarget: A string. Overrides the parent for type="submit" and type="image". height: A string. Specifies the image height for type="image". list: A string. Specifies the id of the with the autocomplete options. max: A number. Specifies the maximum value of numerical and datetime inputs. maxLength: A number. Specifies the maximum length of text and other inputs. min: A number. Specifies the minimum value of numerical and datetime inputs. minLength: A number. Specifies the minimum length of text and other inputs. multiple: A boolean. Specifies whether multiple values are allowed for <type="file" and type="email". name: A string. Specifies the name for this input that’s submitted with the form. onChange: An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. onChangeCapture: A version of onChange that fires in the capture phase. onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly. onInputCapture: A version of onInput that fires in the capture phase. onInvalid: An Event handler function. Fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles. onInvalidCapture: A version of onInvalid that fires in the capture phase. onSelect: An Event handler function. Fires after the selection inside the changes. React extends the onSelect event to also fire for empty selection and on edits (which may affect the selection). onSelectCapture: A version of onSelect that fires in the capture phase. pattern: A string. Specifies the pattern that the value must match. placeholder: A string. Displayed in a dimmed color when the input value is empty. readOnly: A boolean. If true, the input is not editable by the user. required: A boolean. If true, the value must be provided for the form to submit. size: A number. Similar to setting width, but the unit depends on the control. src: A string. Specifies the image source for a type="image" input. step: A positive number or an 'any' string. Specifies the distance between valid values. type: A string. One of the input types. width: A string. Specifies the image width for a type="image" input. Caveats Checkboxes need checked (or defaultChecked), not value (or defaultValue). If a text input receives a string value prop, it will be treated as controlled. If a checkbox or a radio button receives a boolean checked prop, it will be treated as controlled. An input can’t be both controlled and uncontrolled at the same time. An input cannot switch between being controlled or uncontrolled over its lifetime. Every controlled input needs an onChange event handler that synchronously updates its backing value. Usage Displaying inputs of different types To display an input, render an component. By default, it will be a text input. You can pass type="checkbox" for a checkbox, type="radio" for a radio button, or one of the other input types. App.jsApp.jsReloadClearForkexport default function MyForm() { return ( <> Text input:

Checkbox:

Radio buttons: Option 1 Option 2 Option 3

</> ); } Show more Providing a label for an input Typically, you will place every inside a tag. This tells the browser that this label is associated with that input. When the user clicks the label, the browser will automatically focus the input. It’s also essential for accessibility: a screen reader will announce the label caption when the user focuses the associated input. If you can’t nest into a , associate them by passing the same ID to and . To avoid conflicts between multiple instances of one component, generate such an ID with useId. App.jsApp.jsReloadClearForkimport { useId } from 'react'; export default function Form() { const ageInputId = useId(); return ( <> Your first name:

Your age: </> ); } Show more Providing an initial value for an input You can optionally specify the initial value for any input. Pass it as the defaultValue string for text inputs. Checkboxes and radio buttons should specify the initial value with the defaultChecked boolean instead. App.jsApp.jsReloadClearForkexport default function MyForm() { return ( <> Text input:

Checkbox:

Radio buttons: Option 1 Option 2 Option 3

</> ); } Show more Reading the input values when submitting a form Add a around your inputs with a ); } Show more NoteGive a name to every , for example . The name you specified will be used as a key in the form data, for example { firstName: "Taylor" }. PitfallBy default, a The value you pass to controlled components should not be undefined or null. If you need the initial value to be empty (such as with the firstName field below), initialize your state variable to an empty string (''). App.jsApp.jsReloadClearForkimport { useState } from 'react'; export default function Form() { const [firstName, setFirstName] = useState(''); const [age, setAge] = useState('20'); const ageAsNumber = Number(age); return ( <> First name: <input value={firstName} onChange={e => setFirstName(e.target.value)} /> Age: <input value={age} onChange={e => setAge(e.target.value)} type="number" /> <button onClick={() => setAge(ageAsNumber + 10)}> Add 10 years {firstName !== '' &&

Your name is {firstName}.

} {ageAsNumber > 0 &&

Your age is {ageAsNumber}.

} </> ); } Show more PitfallIf you pass value without onChange, it will be impossible to type into the input. When you control an input by passing some value to it, you force it to always have the value you passed. So if you pass a state variable as a value but forget to update that state variable synchronously during the onChange event handler, React will revert the input after every keystroke back to the value that you specified. Optimizing re-rendering on every keystroke When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There’s a few ways you can optimize re-rendering performance. For example, suppose you start with a form that re-renders all page content on every keystroke: function App() { const [firstName, setFirstName] = useState(''); return ( <> <input value={firstName} onChange={e => setFirstName(e.target.value)} /> </> );} Since doesn’t rely on the input state, you can move the input state into its own component: function App() { return ( <> </> );}function SignupForm() { const [firstName, setFirstName] = useState(''); return ( );} This significantly improves performance because now only SignupForm re-renders on every keystroke. If there is no way to avoid re-rendering (for example, if PageContent depends on the search input’s value), useDeferredValue lets you keep the controlled input responsive even in the middle of a large re-render. Troubleshooting My text input doesn’t update when I type into it If you render an input with value but no onChange, you will see an error in the console: // 🔴 Bug: controlled text input with no onChange handler ConsoleYou provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. As the error message suggests, if you only wanted to specify the initial value, pass defaultValue instead: // ✅ Good: uncontrolled input with an initial value If you want to control this input with a state variable, specify an onChange handler: // ✅ Good: controlled input with onChange<input value={something} onChange={e => setSomething(e.target.value)} /> If the value is intentionally read-only, add a readOnly prop to suppress the error: // ✅ Good: readonly controlled input without on change My checkbox doesn’t update when I click on it If you render a checkbox with checked but no onChange, you will see an error in the console: // 🔴 Bug: controlled checkbox with no onChange handler ConsoleYou provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. As the error message suggests, if you only wanted to specify the initial value, pass defaultChecked instead: // ✅ Good: uncontrolled checkbox with an initial value If you want to control this checkbox with a state variable, specify an onChange handler: // ✅ Good: controlled checkbox with onChange<input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} /> PitfallYou need to read e.target.checked rather than e.target.value for checkboxes. If the checkbox is intentionally read-only, add a readOnly prop to suppress the error: // ✅ Good: readonly controlled input without on change My input caret jumps to the beginning on every keystroke If you control an input, you must update its state variable to the input’s value from the DOM during onChange. You can’t update it to something other than e.target.value (or e.target.checked for checkboxes): function handleChange(e) { // 🔴 Bug: updating an input to something other than e.target.value setFirstName(e.target.value.toUpperCase());} You also can’t update it asynchronously: function handleChange(e) { // 🔴 Bug: updating an input asynchronously setTimeout(() => { setFirstName(e.target.value); }, 100);} To fix your code, update it synchronously to e.target.value: function handleChange(e) { // ✅ Updating a controlled input to e.target.value synchronously setFirstName(e.target.value);} If this doesn’t fix the problem, it’s possible that the input gets removed and re-added from the DOM on every keystroke. This can happen if you’re accidentally resetting state on every re-render, for example if the input or one of its parents always receives a different key attribute, or if you nest component function definitions (which is not supported and causes the “inner” component to always be considered a different tree). I’m getting an error: “A component is changing an uncontrolled input to be controlled” If you provide a value to the component, it must remain a string throughout its lifetime. You cannot pass value={undefined} first and later pass value="some string" because React won’t know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string value, not null or undefined. If your value is coming from an API or a state variable, it might be initialized to null or undefined. In that case, either set it to an empty string ('') initially, or pass value={someValue ?? ''} to ensure value is a string. Similarly, if you pass checked to a checkbox, ensure it’s always a boolean.Previous

react

Install Skill

SKILL.md

React Skill

When to Use This Skill

Quick Reference

Common Patterns

Main content

Main content