# Discovering patterns with React hooks

DevFeed: [Discovering patterns with React hooks](<https://devfeed.tech/articles/discovering-patterns-with-react-hooks-21874.md>)

Original publisher: [Read original article](<https://ponyfoo.com/articles/discovering-patterns-with-react-hooks>)

Author: m@peka.la (Maciek Pekala)

Published: 2019-05-13T12:15:55Z

Content type: article

Language: en

Sources: [Pony Foo](<https://devfeed.tech/sources/pony-foo.md>)

Topics: [React Hooks](<https://devfeed.tech/topics/react-hooks.md>), [React](<https://devfeed.tech/topics/react.md>), [hooks](<https://devfeed.tech/topics/hooks.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [coding](<https://devfeed.tech/tags/coding.md>), [components](<https://devfeed.tech/tags/components.md>), [hooks](<https://devfeed.tech/tags/hooks.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [react](<https://devfeed.tech/tags/react.md>), [react-hooks](<https://devfeed.tech/tags/react-hooks.md>)

## AI overview

An exploration of patterns that emerge when building stateful React components with hooks. The article introduces the author's Choco pattern, which combines Context, a Hook, and a Component for top-level, centralized, unique UI widgets that expose functionality to other application components.

## Source excerpt

One of the things I enjoy the most about coding is discovering patterns. Being aware and mindful of the patterns emerging in your codebase can make it easier to keep that codebase consistent, readable and easy to navigate. Most patterns will remain unspoken, and some, that prove notably elegant, are named and promoted as best practices. Others might even be candidates for a basis of a new abstraction, although I recommend restraint as it's worth remembering that abstractions are expensive. If you're not familiar with the topic or React hooks, there is plenty of introductory as well as in-depth materials out there. I can also shamelessly recommend my talk on hooks from a recent React Copenhagen meetup. What follows assume at least some understanding of what hooks are and how to use them. Pattern extinction level event Discovering new patterns is relatively rare when working with established technologies, but every now and then a new idea comes up that stirs things up within some ecosystem. Enter React hooks. Hooks enable a drastically different way to build stateful components in React, which means that they also invalidate 1 a lot of the established patterns. However, being an exceptionally well thought-through and composition-friendly abstraction, hooks enabled new, elegant patterns to emerge. Over the last few months, I've been building apps with hooks and I've been having a lot of fun discovering these patterns. I'd like to share one, that I've grown especially fond of. For the lack of a better name, and for sole the purpose of this blog post, let's call it the Choco pattern (from Context, HOok, COpomonent). The pattern comes useful when you need a UI widget which is top-level, centralised and unique across the application and needs to expose some functionality to the rest of the components in the app. It might sound vague at the moment, so let's try to go through solving a concrete problem where I noticed the Choco pattern manifest itself. Exhibit A: Feature tog