large_Frame 1.jpg

medium_Frame 1.jpg

small_Frame 1.jpg

thumbnail_Frame 1.jpg

Frame 1.jpg

Setting up

We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

![Profile photo](/uploads/IMG_DB_61_C6_FE_7138_1_b5167904ad.jpeg)

You can use Static Generation for many types of pages, including:

- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation

You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.

![_this is an image description, from [unsplash](https://exogen.github.io/blog/focus-state)_](https://paco.sh/blog/persistent-icons/icns.png)

On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

![Image example 2](/uploads/Screen_Shot_2020_04_09_at_1_40_26_ea2ac8cb1a.png)

### My Great Heading

In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.


Image Article

> Unfortunately, trying to use `:focus` limits what you can do: you can style the input or siblings that come after the input… but that’s it.
> — [Initializing focus state in React](https://exogen.github.io/blog/focus-state)

[SWR](https://github.com/zeit/swr) is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. <a href="#footnote"><sup>1</sup></a>

Let's look at an example of a `useUsername` hook:

```js
const useUsername = () => {
  return useState('')
}

const UsernameInput = () => {
  const [username, setUsername] = useUsername()

  return (
    <div>
      <input value={username} onChange={setUsername} />
    </div>
  )
}

const DisplayUsername = () => {
  const [username] = useUsername()

  return <span>Username: {username}</span>
}
```

This won't work, because each time we call `useUsername`, we receive a new instance of state. Updating the input won't affect what our `DisplayUsername` component renders.

### Solving with Context

With React context, we typically lift the username state to the highest level and `useContext` to read the value in our components:

```js
const UsernameContext = createContext()

const App = () => (
  <UsernameProvider>
    {/* ... */}
  </UsernameProvider>
)

const UsernameProvider = ({ children }) => {
  const [username, setUsername] = useState('')

  return (
    <UsernameContext.Provider value={[username, setUsername]}>
      {children}
    </UsernameContext.Provider>
  )
}

const DisplayUsername = () => {
  const [username] = useContext(UsernameContext)

  return (
    <span>Username: {username}
  )
}
```

This will work, but in big applications you'll end up with a lot of context.

## Solving with SWR

We can simulate `useState` with SWR by using the [`mutate`](https://github.com/zeit/swr#bound-mutate) function as our `setState`, and the [`config.initialData`](https://github.com/zeit/swr#options) option the initial state. Now when we call `mutate`, the updated data will be reflected everywhere the hook is used.

```js
import useSWR from 'swr'

const useUsername = () => {
  const { data: username, mutate: setUsername } = useSWR('username', {
    initialData: '',
  })

  return [username, setUsername]
}
```

It works, no context required. Every `useUsername` will share the same state, and calling `setUsername` will update the state across all uses of the hook.

### useSharedState

We can go one step further and build a shared addition to `useState`:

```js
const useSharedState = (key, initial) => {
  const { data: state, mutate: setState } = useSWR(key, {
    initialData: initial,
  })

  return [state, setState]
}
```

Use it like `useState`, but pass a key as the first argument:

```js
const [username, setUsername] = useSharedState('username', 'paco')
const [os, setOS] = useSharedState('os', 'macos')
```

SWR is mainly used to manage remote data requests, but it also provides a powerful cache and API that you can use to share local state between hooks. Kudos to [Shu](https://twitter.com/shuding_) for his excellent work!

---

1. Two components using the same React hook [**don't share state by default**](https://reactjs.org/docs/hooks-custom.html#:~:text=Do%20two%20components%20using%20the%20same%20Hook%20share%20state).

2. SWR uses a client-side only cache, so your data won't persist between sessions or windows unless you keep external state like `localStorage`, at which point SWR may not be useful.

> Unfortunately, trying to use `:focus` limits what you can do: you can style the input or siblings that come after the input… but that’s it.
> — [Initializing focus state in React](https://exogen.github.io/blog/focus-state)

large_Screen Shot 2020-04-09 at 1.40.26.png

medium_Screen Shot 2020-04-09 at 1.40.26.png

small_Screen Shot 2020-04-09 at 1.40.26.png

thumbnail_Screen Shot 2020-04-09 at 1.40.26.png

Screen Shot 2020-04-09 at 1.40.26.png

Using SWR to shared state

Setting up

Setting up

Image Article

Using SWR to shared state

Setting up

Image Article

Using SWR to shared state

Setting up

Image Article

Using SWR to shared state

Setting up

Image Article

Using SWR to shared state

Setting up

Image Article

Using SWR to shared state

Acerca de Déjame te Cuento

¿Quieres contribuir?