> For the complete documentation index, see [llms.txt](https://maissen.gitbook.io/react-grimoire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://maissen.gitbook.io/react-grimoire/concepts/advanced-patterns.md).

# Advanced Patterns

In this Section i'll try my best to explain common react patterns used from React Gurus,code implementation, pros and cons of each, and specific usage with public libraries. Let's talk about it.

> The actual contents comes from Epic React’s Advanced React Patterns Workshop.
>
> If you have interests, you can check [Epic React](https://epicreact.dev/) by Kent C. Dodds.

AS a React developer, you may have asked the following question at least once.

· How to develop **reusable** components that can be applied to various cases ?

· How to create a component that provides an easy-to-use and **simple API ?**

· What do you need to develop **extensible** components for both UI and functionality ?

These questions have been recurring since the past, and the React community has come up with some advanced patterns as answers to them.

{% hint style="warning" %}
**building a Component for other developers. Therefore, the actor “clients” refers directly to these developers (And not the final user which will use your website/application).**
{% endhint %}

The Final sand box with all the patterns

{% embed url="<https://codesandbox.io/s/react-patterns-uenl15?file=%2Fsrc%2Fpatterns%2Fcompound-component%2FCounter.js>" %}

## References and articles :

{% embed url="<https://advanced-react-patterns.netlify.app>" %}

{% embed url="<https://www.benmvp.com/blog/picking-right-react-component-pattern>" %}

{% embed url="<https://www.patterns.dev/posts>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://maissen.gitbook.io/react-grimoire/concepts/advanced-patterns.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.