ryanflorence

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.

ryanflorence

YOOOOOOO

console.log("hey");

ryanflorence

asdfa

ryanflorence

yep

ryanflorence

so cool

ryanflorence

So cool

ryanflorence

fart fart fart

ryanflorence

meta
title Mutations with Actions and Form | Remix

import { Link } from "react-router-dom";

Mutations with Actions and <Form>

Data mutations in Remix are built on top of two fundamental web APIs: `` and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback--but the programming model is still built on HTML forms.

ryanflorence

import type { Action, Loader } from "@remix-run/loader";
import { json, parseFormBody, redirect } from "@remix-run/loader";
import { readTodos, createTodo, deleteTodo } from "../data/todo";

let action: Action = async ({ request, context: { session } }) => {
  let [method, body] = await methodOverride(request);
  await new Promise((res) => setTimeout(res, 1000));
  switch (method) {
    case "post": {
      let [_, error] = await createTodo(body!.name);

ryanflorence

///////////////////////////////////////////////////////////
// loader
const { db } = require("../server/firebase");
module.exports = () => {
  return db.doc("some/path").get().data();
};

///////////////////////////////////////////////////////////
// Non-remix hook for docs, takes initial data for immediate
// rendering