Skip to content
Permalink
Browse files

Fix links.

  • Loading branch information...
ghengeveld committed Oct 8, 2019
1 parent 4c60795 commit c8ef288382cf2bd6b9b35b2344253da367c0c645
@@ -2,11 +2,11 @@

Fetching data for display alone isn't sufficient for most applications. You'll often also want to submit data back to
the server, or handle other types of asynchronous actions. To enable this, React Async has the concept of a
[`deferFn`](api/options.md#deferfn).
[`deferFn`](../api/options.md#deferfn).

Like `promiseFn`, a `deferFn` is a function that returns a Promise. The difference is that `deferFn` will not be
automatically invoked by React Async when rendering the component. Instead it will have to be triggered by calling the
[`run`](api/state.md#run) function provided by React Async.
[`run`](../api/state.md#run) function provided by React Async.

```jsx
import React, { useState } from "react"
@@ -44,7 +44,7 @@ the `args` array at the first index using [array destructuring] and pass it alon

## Sending data with `useFetch`

The above example can be simplified when we rely on [`useFetch`](api/interfaces.md#usefetch-hook) instead of
The above example can be simplified when we rely on [`useFetch`](../api/interfaces.md#usefetch-hook) instead of
constructing the request manually.

```jsx
@@ -72,5 +72,5 @@ const NewsletterForm = () => {
}
```

The [`run`](api/state.md#run) function for `useFetch` is a little special because it allows you to override the
The [`run`](../api/state.md#run) function for `useFetch` is a little special because it allows you to override the
request's resource and other params. This way you can pass in the body, add dynamic headers or override the URL.
@@ -13,7 +13,7 @@ good practice.
## Creating an async component with `useFetch`

The easiest way to create an async component for data fetching is through the
[`useFetch` hook](api/interfaces.md#usefetch-hook):
[`useFetch` hook](../api/interfaces.md#usefetch-hook):

```jsx
import React from "react"
@@ -37,12 +37,12 @@ const App = () => {

For most data fetching needs, `useFetch` is sufficient. However, sometimes you may want to take full control, for
example if you want to combine multiple requests. In this case you can use the
[`useAsync` hook](api/interfaces.md#useasync-hook).
[`useAsync` hook](../api/interfaces.md#useasync-hook).

The core concept of `useAsync` (and React Async in general), is the [`promiseFn`](api/options.md#promisefn): a function
that returns a `Promise`. It's the fundamental concept for modelling asynchronous operations. It enables React Async to
take control over scheduling, the Promise lifecycle and things like (re)starting an operation on user action or other
changes. We've deliberately chosen the `Promise` as our primitive, because it's natively supported and has various
The core concept of `useAsync` (and React Async in general), is the [`promiseFn`](../api/options.md#promisefn): a
function that returns a `Promise`. It's the fundamental concept for modelling asynchronous operations. It enables React
Async to take control over scheduling, the Promise lifecycle and things like (re)starting an operation on user action or
other changes. We've deliberately chosen the `Promise` as our primitive, because it's natively supported and has various
utility methods like `Promise.all`. That's also why you'll find our terminology closely follows the Promise [states and
fates].

@@ -5,7 +5,7 @@ might be able to predict the outcome of the operation. If so, you can implement
setting the `data` to the predicted value, when starting the async action. Once the action completes, it will update
`data` to the actual value, probably the same value as predicted.

The following example uses both `promiseFn` and `deferFn` along with [`setData`](api/state.md#setdata) to implement
The following example uses both `promiseFn` and `deferFn` along with [`setData`](../api/state.md#setdata) to implement
optimistic updates.

```jsx
@@ -40,8 +40,8 @@ const App = () => {
## Cleaning up the JSX

You'll notice the render props pattern is very powerful, but can also lead to code that's hard to read and understand.
To make your JSX more declarative and less cluttered, you can use the [`<Async>`](api/interfaces.md#async-component)
component and its [state helpers](api/helpers.md). These take away the need for `if/else` statements and `return`
To make your JSX more declarative and less cluttered, you can use the [`<Async>`](../api/interfaces.md#async-component)
component and its [state helpers](../api/helpers.md). These take away the need for `if/else` statements and `return`
keywords in your JSX.

```jsx
@@ -2,7 +2,7 @@

There's a good chance you're using React with Server-side rendering (SSR), as many applications require this to be
successful. If you happen to be using Next.js, it's really easy to integrate React Async. The crux is in setting a
[`initialValue`](api/options.md#initialvalue), which is fetched server-side for initial page loads and passed along
[`initialValue`](../api/options.md#initialvalue), which is fetched server-side for initial page loads and passed along
through rehydration.

```jsx

0 comments on commit c8ef288

Please sign in to comment.
You can’t perform that action at this time.