Prop Collections and Getters

In typical UI components, you need to take accessibility into account. For a button functioning as a toggle, it should have the aria-checked attribute set to true or false if it's toggled on or off. In addition to remembering that, people need to remember to also add the onClick handler to call toggle.

Lots of the reusable/flexible components and hooks that we'll create have some common use-cases and it'd be cool if we could make it easier to use our components and hooks the right way without requiring people to wire things up for common use cases.

Here's a quick example:

function useCounter() {
	const [count, setCount] = useState(initialCount)
	const increment = () => setCount(c => c + 1)
	return {
		count,
		increment,
		counterButtonProps: { children: count, onClick: increment },
	} // <-- this is the prop collection
}

function App() {
	const counter = useCounter()
	return <button {...counter.counterButtonProps} />
}

🦉 Note that we're moving from a collection of related components (compound components) to a hook for the upcoming patterns. We'll bring back a Toggle component that uses the hook later, but often it's useful to drop down to a lower level of abstraction to give consumers more power and then build on top of that. And you can definitely combine the patterns (read my old post on the subject demonstrating how to do this with class components: Mixing Component Patterns).