This project is intended to explore the usage of Context API and compare it to other ways of accomplishing the same result.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
| ContextAPI | Redux | |
|---|---|---|
| What is it? | A way of passing data (values, states, functions) through the component tree without having to pass props down manually at every level. | A library for managing and updating application state in a predictable and testable way. |
| What is it NOT? | A state management system. | Just a way of sharing global state. |
| When should you use it? | - You need to share some global state across multiple components. | - You need to share large amounts of global state across multiple components. - The logic to update that state may be complex. - The app has a medium or large-sized codebase, and might be worked on by many people. - You need more sofisticated debug tools. |
| When should you NOT use it? | - Only one or two components use it. - Passing props would do the job just as fine. - The components need to be reusable. |
- Small applications with a only a few global states. - All you need is just sharing global state. |
| What libs would you install? | - React | - React - Redux - React Redux - React Toolkit (optional) - React Devtools Extension (optional) |
- https://medium.com/@devluispereira/react-context-api-typescript-507eec884549
- https://github.com/devluispereira/context-api-example
- https://github.com/rodrigoxavier/using-react-hooks
- https://changelog.com/posts/when-and-when-not-to-reach-for-redux
- https://redux.js.org/
- https://react-redux.js.org/
- https://redux-toolkit.js.org/