gpichot

export default function SessionsList() {
  const sessionsQuery = useSessionsListQuery();

  return (
    <PageLayout title="My sessions">
      {matchQueryStatus(sessionsQuery, {
        Loading: (
          <>
            <Skeleton height={70} mt={6} />
            <Skeleton height={70} mt={6} />

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

EliCDavis

package main

import (
	"fmt"
	"log"
	"syscall"
	"unsafe"
)

var (

swyxio

// create context with no upfront defaultValue
// without having to do undefined check all the time
function createCtx<A>() {
  const ctx = React.createContext<A | undefined>(undefined)
  function useCtx() {
    const c = React.useContext(ctx)
    if (!c) throw new Error("useCtx must be inside a Provider with a value")
    return c
  }
  return [useCtx, ctx.Provider] as const

ArcanisCz

/*
* Usage: 
* const AppProvider = createProvider(rootReducer, rootSaga);
* ...
* <AppProvider>
*   <AppComponent>
* </AppProvider>
*/
const createProvider = (reducer, saga) => {
  const sagaMiddleware = createSagaMiddleware();

sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

rbalicki2

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

timhwang21

Handling conditional field visibility in dynamic forms

This post explores several common ways of handling visibility of conditional fields. Our sample form will have the following schema:

• foo: always present
• bar: dependent on form state (value of foo)
• baz: dependent on other application state (e.g. user permissions)

Below is our form, prior to implementing visibility logic:

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

markerikson

// Option 1: a thunk action creator using redux-thunk middleware
function myThunkActionCreator(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});

        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(
                // Use the (resolve, reject) form of .then() instead of .catch(),
                // so that we don't accidentally dispatch REQUEST_FAILED on a reducer error
                response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),