Render Props Pattern

This teaches the render props pattern where you pass a function as a prop that returns JSX, letting components share stateful logic without lifting state everywhere. The skill walks through a temperature converter example, showing how an Input component can pass its internal state down to Kelvin and Fahrenheit components via a render function or children-as-function. It's honest about when not to use this: modern React code usually reaches for custom Hooks instead, and nested render props get ugly fast. Good reference if you're maintaining older React codebases or need to understand this pattern before refactoring to Hooks, but you probably shouldn't be writing new render props in 2024.

Install to Claude Code

npx -y skills add patternsdev/skills --skill render-props-pattern --agent claude-code