docs: add a warning for chaning the initialSize option in the lifecyc…

…le (#69)

pages/docs/pagination.mdx

@@ -38,7 +38,7 @@ First of all, we might **NOT** need `useSWRInfinite` but can use just `useSWR` i
 <path d="M239.349 327.119C241.13 327.119 242.438 326.054 242.434 324.605C242.438 323.501 241.769 322.709 240.61 322.53V322.462C241.522 322.227 242.114 321.511 242.11 320.531C242.114 319.249 241.062 318.153 239.383 318.153C237.781 318.153 236.494 319.121 236.451 320.54H237.725C237.755 319.739 238.509 319.253 239.366 319.253C240.256 319.253 240.84 319.794 240.836 320.599C240.84 321.443 240.163 321.997 239.195 321.997H238.458V323.071H239.195C240.406 323.071 241.104 323.685 241.104 324.562C241.104 325.411 240.367 325.986 239.34 325.986C238.394 325.986 237.657 325.5 237.606 324.724H236.268C236.323 326.148 237.585 327.119 239.349 327.119Z" fill="#454545"/>
 </svg>
 
-...which is a typical pagination UI. Let's see how it can be easily implemented with 
+...which is a typical pagination UI. Let's see how it can be easily implemented with
 `useSWR`:
 
 ```jsx highlight=5
@@ -118,7 +118,7 @@ to the list (or done automatically when you scroll):
 <path d="M354.49 309H359.761V307.866H355.807V300.273H354.49V309ZM363.918 309.132C365.763 309.132 366.969 307.781 366.969 305.757C366.969 303.72 365.763 302.369 363.918 302.369C362.073 302.369 360.867 303.72 360.867 305.757C360.867 307.781 362.073 309.132 363.918 309.132ZM363.923 308.062C362.717 308.062 362.154 307.01 362.154 305.753C362.154 304.5 362.717 303.435 363.923 303.435C365.12 303.435 365.683 304.5 365.683 305.753C365.683 307.01 365.12 308.062 363.923 308.062ZM370.297 309.145C371.379 309.145 371.988 308.595 372.231 308.105H372.282V309H373.527V304.653C373.527 302.749 372.027 302.369 370.987 302.369C369.802 302.369 368.711 302.847 368.285 304.04L369.483 304.312C369.67 303.848 370.147 303.401 371.004 303.401C371.826 303.401 372.248 303.831 372.248 304.572V304.602C372.248 305.067 371.771 305.058 370.595 305.195C369.355 305.339 368.085 305.663 368.085 307.151C368.085 308.438 369.052 309.145 370.297 309.145ZM370.574 308.122C369.853 308.122 369.333 307.798 369.333 307.168C369.333 306.486 369.939 306.243 370.676 306.145C371.089 306.089 372.069 305.979 372.252 305.795V306.639C372.252 307.415 371.635 308.122 370.574 308.122ZM377.674 309.128C378.867 309.128 379.336 308.399 379.566 307.982H379.673V309H380.917V300.273H379.643V303.516H379.566C379.336 303.111 378.901 302.369 377.683 302.369C376.102 302.369 374.938 303.618 374.938 305.74C374.938 307.858 376.085 309.128 377.674 309.128ZM377.955 308.041C376.817 308.041 376.225 307.04 376.225 305.727C376.225 304.428 376.805 303.452 377.955 303.452C379.067 303.452 379.664 304.359 379.664 305.727C379.664 307.104 379.055 308.041 377.955 308.041ZM386.013 300.273V309H387.266V302.68H387.347L389.921 308.987H390.961L393.535 302.685H393.616V309H394.869V300.273H393.271L390.492 307.057H390.39L387.612 300.273H386.013ZM399.438 309.132C401.283 309.132 402.489 307.781 402.489 305.757C402.489 303.72 401.283 302.369 399.438 302.369C397.593 302.369 396.387 303.72 396.387 305.757C396.387 307.781 397.593 309.132 399.438 309.132ZM399.442 308.062C398.236 308.062 397.674 307.01 397.674 305.753C397.674 304.5 398.236 303.435 399.442 303.435C400.64 303.435 401.202 304.5 401.202 305.753C401.202 307.01 400.64 308.062 399.442 308.062ZM403.911 309H405.185V305.003C405.185 304.146 405.846 303.528 406.749 303.528C407.013 303.528 407.312 303.575 407.414 303.605V302.386C407.286 302.369 407.035 302.357 406.873 302.357C406.106 302.357 405.45 302.791 405.211 303.494H405.143V302.455H403.911V309ZM411.103 309.132C412.531 309.132 413.541 308.429 413.831 307.364L412.625 307.146C412.395 307.764 411.841 308.08 411.116 308.08C410.025 308.08 409.292 307.372 409.258 306.111H413.912V305.659C413.912 303.294 412.497 302.369 411.014 302.369C409.19 302.369 407.988 303.759 407.988 305.77C407.988 307.803 409.173 309.132 411.103 309.132ZM409.262 305.156C409.314 304.227 409.987 303.422 411.022 303.422C412.011 303.422 412.659 304.155 412.663 305.156H409.262Z" fill="#454545"/>
 </svg>
 
-To implement this, we need to make **dynamic number of requests** on this page. React Hooks have [a couple of rules](https://reactjs.org/docs/hooks-rules.html), 
+To implement this, we need to make **dynamic number of requests** on this page. React Hooks have [a couple of rules](https://reactjs.org/docs/hooks-rules.html),
 so we **CANNOT** do something like this:
 
 ```jsx highlight=5,6,7,8,9
@@ -133,7 +133,7 @@ function App () {
   }
 
   return <div>
-    {list.map((data, i) => 
+    {list.map((data, i) =>
       <div key={i}>{
         data.map(item => <div key={item.id}>{item.name}</div>)
       }</div>)}
@@ -164,7 +164,7 @@ function App () {
 
 However, in some advanced use cases, the solution above doesn't work.
 
-For example, we are still implementing the same "Load More" UI, but also need to display a number 
+For example, we are still implementing the same "Load More" UI, but also need to display a number
 about how many items are there in total. We can't use the `<Page />` solution anymore because
 the top level UI (`<App />`) needs the data inside each page:
 
@@ -216,6 +216,10 @@ In infinite loading, one _page_ is one request, and our goal is to fetch multipl
   - `revalidateAll = false`: always try to revalidate all pages
   - `persistSize = false`: don't reset the page size to 1 (or `initialSize` if set) when the first page's key changes
 
+<Callout>
+  Note that the `initialSize` option is not allowed to change in the lifecycle.
+</Callout>
+
 #### Return Values
 
 - `data`: an array of fetch response values of each page
@@ -267,7 +271,7 @@ function App () {
 }
 ```
 
-The `getKey` function is the major difference between `useSWRInfinite` and `useSWR`. 
+The `getKey` function is the major difference between `useSWRInfinite` and `useSWR`.
 It accepts the index of the current page, as well as the data from the previous page.
 So both index based and cursor based pagination API can be supported nicely.