# Parity with React

Sorted by priority

| Feature                | Dioxus | React | Notes                                            |
| ---------------------- | ------ | ----- | ------------------------------------------------ |
| ----- Phase 1 -----    | -----  | ----- | -----                                            |
| Conditional Rendering  | ✅     | ✅    | if/then to hide/show component                   |
| Map, Iterator          | ✅     | ✅    | map/filter/reduce rsx!                           |
| Keyed Components       | ✅     | ✅    | advanced diffing with keys                       |
| Web                    | ✅     | ✅    | renderer for web browser                         |
| Desktop (webview)      | ✅     | ✅    | renderer for desktop                             |
| Context                | ✅     | ✅    | share state through the tree                     |
| Hook                   | ✅     | ✅    | memory cells in components                       |
| SSR                    | ✅     | ✅    | render directly to string                        |
| Runs natively          | ✅     | 👀    | runs as a portable binary w/o a runtime (Node)   |
| Component Children     | ✅     | ✅    | cx.children() as a list of nodes                 |
| Null components        | ✅     | ✅    | allow returning no components                    |
| No-div components      | ✅     | ✅    | components that render components                |
| Fragments              | ✅     | ✅    | rsx! can return multiple elements without a root |
| Manual Props           | 👀     | ✅    | Manually pass in props                           |
| NodeRef                | 👀     | ✅    | gain direct access to nodes                      |
| Controlled Inputs      | ✅     | ✅    | stateful wrappers around inputs                  |
| CSS/Inline Styles      | 🛠      | ✅    | syntax for inline/conditional styles             |
| 1st class global state | 🛠      | ✅    | redux/recoil/mobx on top of context              |
| ----- Phase 2 -----    | -----  | ----- | -----                                            |
| 1st class router       | 👀     | ✅    | Hook built on top of history                     |
| Assets                 | 👀     | ✅    | include css/svg/img url statically               |
| Integrated classnames  | 🛠      | 👀    | built-in `classnames`                            |
| Suspense               | 👀     | 👀    | schedule future render from future/promise       |
| Transition             | 👀     | 👀    | High-level control over suspense                 |
| Animation              | 👀     | ✅    | Spring-style animations                          |
| Mobile                 | 👀     | ✅    | Render with cacao                                |
| Desktop (native)       | 👀     | ✅    | Render with native desktop                       |
| 3D Renderer            | 👀     | ✅    | react-three-fiber                                |
| ----- Phase 3 -----    | -----  | ----- | -----                                            |
| Portal                 | 👀     | ✅    | cast elements through tree                       |
| Error/Panic boundary   | 👀     | ✅    | catch panics and display custom BSOD             |
| Code-splitting         | 👀     | ✅    | Make bundle smaller/lazy                         |
| LiveView               | 👀     | 👀    | Example for SSR + WASM apps                      |

## Required services:

---

Gloo is covering a lot of these. We want to build hooks around these, and provide examples on how to use them.
https://github.com/rustwasm/gloo

If the gloo service doesn't exist, then we need to contribute to the project

| Service                      | Hook examples | Current Projects |
| ---------------------------- | ------------- | ---------------- |
| Fetch                        | 👀            | Reqwest/surf     |
| Local storage (cache)        | 👀            | Gloo             |
| Persistent storage (IndexDB) | 👀            | 👀               |
| WebSocket                    | 👀            | Gloo             |
| 3D Renderer / WebGL          | 👀            | Gloo             |
| Web Worker                   | 👀            | 👀               |
| Router                       | 👀            | 👀               |
| Notifications                | 👀            | 👀               |
| WebRTC Client                | 👀            | 👀               |
| Service Workers              | 👀            | 👀               |
| Resize Observer              | 👀            | 👀               |
| Canvas                       | 👀            | 👀               |
| Clipboard                    | 👀            | 👀               |
| Fullscreen                   | 👀            | 👀               |
| History API                  | 👀            | 👀               |