# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.