Listen "Controlled and uncontrolled components"
Episode Synopsis
Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably.Timestamps:0:00 - Intro1:41 - What are controlled and uncontrolled components?6:11 - How to change a component from uncontrolled to controlled8:48 - How do you decide when to use a controlled or uncontrolled component?12:00 - Sortable table example and a single source of truth15:27 - Is it always either controlled or uncontrolled?21:09 - Color picker example and not exposing internal state28:46 - Sortable list example with Framer Motion39:45 - Component boundaries and wearing two hats: the library author vs. library consumer41:43 - How do you know if you are using the wrong approach?Links:New course: Advanced React Component PatternsReact docs: Controlled and uncontrolled componentsReact docs: Storing state from previous rendersEmail SamEmail RyanFrontend First on Twitter
More episodes of the podcast Frontend First
Creating a background gradient from an image
12/12/2024
Exploring useActionState
14/11/2024
Can you self-host Next.js?
10/10/2024
Tom Occhino on the future of React
18/09/2024
Render props
05/09/2024
Unstyled React components
15/08/2024
What is a framework?
01/08/2024
ZARZA We are Zarza, the prestigious firm behind major projects in information technology.