You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
and instrument your Suspenseful loads with Reactfire's `<SuspenseWithPerf>`
26
-
component
17
+
[handle it for you](https://reactjs.org/docs/concurrent-mode-suspense.html).
18
+
-**Faster initial page load times** - Load only the code you need, when you need it, with `useFirestore`, `useAuth`, `useRemoteConfig`, and more.
19
+
-**Convenient components for common use cases** - Only want to render a component if a user is signed in? Wrap it in `<AuthCheck />`. Need to automatically instrument your `Suspense` load times with [RUM](https://firebase.google.com/docs/perf-mon)? Use `<SuspenseWithPef />`.
27
20
28
21
## Install
29
22
30
23
```bash
31
24
# npm
32
-
npm install --save reactfire
25
+
npm install --save reactfire firebase
33
26
34
27
# yarn
35
-
yarn add reactfire
28
+
yarn add reactfire firebase
36
29
```
37
30
31
+
-[**Quickstart**](./docs/quickstart.md)
32
+
-[**Common Use Cases**](./docs/use.md)
33
+
-[**API Reference**](./docs/reference.md)
34
+
38
35
## Example use
39
36
40
37
Check out the
41
-
[live version on StackBlitz](https://stackblitz.com/edit/reactfire-sample)!
38
+
[live version on StackBlitz](https://stackblitz.com/fork/reactfire-sample)!
42
39
43
40
```jsx
44
41
importReact, { Component } from'react';
45
-
import { render } from'react-dom';
46
-
import'./style.css';
42
+
import { createRoot } from'react-dom';
47
43
import {
48
44
FirebaseAppProvider,
49
45
useFirestoreDocData,
46
+
useFirestore,
50
47
SuspenseWithPerf
51
48
} from'reactfire';
52
49
53
50
constfirebaseConfig= {
54
-
/*add your config object from the Firebase console*/
51
+
/*Add your config from the Firebase Console*/
55
52
};
56
53
57
54
functionBurrito() {
58
-
// lazy load the Firestore SDK and create a ref
55
+
// lazy load the Firestore SDK
56
+
// and create a ref
59
57
constburritoRef=useFirestore()
60
58
.collection('tryreactfire')
61
59
.doc('burrito');
@@ -65,18 +63,15 @@ function Burrito() {
65
63
// and then streams live updates
66
64
constburrito=useFirestoreDocData(burritoRef);
67
65
68
-
// get the value from the doc
69
-
constisYummy=burrito.yummy;
70
-
71
-
return<p>The burrito is {isYummy ?'good':'bad'}!</p>;
66
+
return<p>The burrito is {burrito.yummy?'good':'bad'}!</p>;
Copy file name to clipboardExpand all lines: docs/quickstart.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Reactfire Quickstart
1
+
# ReactFire Quickstart
2
2
3
3
⚛ + 🔥 = 🌯
4
4
5
5
We'll build a web app that displays, in _real time_, the tastiness of a burrito. It will listen to **Cloud Firestore** for its data, and we'll configure **Firebase Performance Monitoring** so we can get some perf stats.
6
6
7
-
To see the completed app, check out [this StackBlitz workspace](https://stackblitz.com/edit/reactfire-sample).
7
+
To see the completed app, check out [this StackBlitz workspace](https://stackblitz.com/fork/reactfire-sample).
8
8
9
-
## 1. In a terminal, create a fresh React app and `cd` into its directory.
9
+
## 1. In a terminal, create a fresh React app and `cd` into its directory
10
10
11
11
> Prerequisite: make sure you have [Node.js](https://nodejs.org/en/) installed.
// lazy load the Firestore SDK and create a document reference
90
+
constburritoRef=useFirestore()
96
91
.collection('tryreactfire')
97
92
.doc('burrito');
98
93
@@ -118,6 +113,11 @@ Replace the `App` function with the following:
118
113
functionApp() {
119
114
return (
120
115
<div className="App">
116
+
{/*
117
+
SuspenseWithPerf behaves the same as Suspense,
118
+
but also automatically measures load times with the User Timing API
119
+
and reports it to Firebase Performance Monitoring
120
+
*/}
121
121
<SuspenseWithPerf
122
122
fallback={'loading burrito status...'}
123
123
traceId={'load-burrito-status'}
@@ -140,11 +140,11 @@ npm run start
140
140
141
141
1. Edit the value of `yummy` in the Firebase console, and watch it update in real time in your app! 🔥🔥🔥
142
142
143
-
## _But what about Firebase Performance Monitoring?_
143
+
## _About Firebase Performance Monitoring_
144
144
145
-
By passing the `initPerformance` prop to `FirebaseAppProvider`, our app will automatically measure [common performance stats](https://firebase.google.com/docs/perf-mon/automatic-web), as well as report on our custom trace, `load-burrito-status`, that we set in the `traceId` prop of `SuspenseWithPerf`.
145
+
`SuspenseWithPerf`will lazy load the Firebase Performance Monitoring library and report on on our custom trace, `load-burrito-status`, that we set in the `traceId` prop of `SuspenseWithPerf`. In addition, it will automatically measure [common performance stats](https://firebase.google.com/docs/perf-mon/automatic-web)!
146
146
147
-
However, Firebase Performance Monitoring can take about 12 hours to crunch your data and show it in the _Performance_ tab of the Firebase console.
147
+
Note that Firebase Performance Monitoring can take about 12 hours to crunch your data and show it in the _Performance_ tab of the Firebase console.
148
148
149
149
This is an example of some of the stats in the Firebase Performance Monitoring console after 12 hours:
| source |`Observable`| The observable whose values you want to subscribe to |
396
+
| observableId |`string`| A unique id. If this id matches an observable already in the cache, `useObservable` will reuse that observable instead of the one passed in. |
397
+
| startWithValue _?_|`T`| A value to emit first (if you don't want `useObservable` to throw a Promise) |
398
+
| deps | React.DependencyList | A list of values that, when changed, should cause `useObservable` to re-subscribe to its observable |
399
+
400
+
##### Returns
401
+
402
+
`T`
403
+
384
404
## ReactFireOptions
385
405
386
406
| Property | Type |
@@ -578,3 +598,20 @@ Start importing the `firebase/storage` package.
| refProvider |`(firestore: firebase.firestore.Firestore) => firestore.DocumentReference`| A function that is called when the firestore SDK is ready and generates a DocumentReference to read |
613
+
| firebaseApp |`firebase.app.App`| The firebase app |
0 commit comments