Daniel Steigerwald steida

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.

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

Why using the `children` prop makes `React.memo()` not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

`Option` vs non-`Option`

	`Option<T>`	non-`Option` (`T \| undefined`)
accessing property	`userOption.map(user => user.age)`	`userNullish?.age`
calling a method	`userOption.map(user => user.fn())`	`userNullish?.fn()`
providing fallback	`ageOption.getOrElse(0)`	`ageNullish ?? 0`
filter	`ageOption.filter(checkIsOddNumber)`	`ageNull

The following section is not part of monet.js documentation, but I think it's worth showing how we can compose readers using fp-ts.

Reader composition

Let's say we have the following piece of code:

interface Dependencies {
  logger: { log: (message: string) => void }
 env: 'development' | 'production'

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

Rapid prototyping with Relay

Relay makes data fetching in React apps simpler, by letting you declare the data needs of your components instead of writing complex imperative code. React, Relay, GraphQL and the other complementary tools are changing how apps are built.

Huh?

So basically FlowType doesn't know about CSS Modules, a really handy way of dealing with the plagues of CSS in codebases (global variables and dependency wackiness mainly).

What WebPack allows us to do is "require" CSS files and use their class names:

import styles from "my_styles.css";
import React from "react";

	/**
	* Copyright (c) Meta Platforms, Inc. and affiliates.
	*
	* This source code is licensed under the MIT license found in the
	* LICENSE file in the root directory of this source tree.
	*
	*
	*/

	import stylex from '@stylexjs/stylex';

	// @flow

	declare module 'react-relay' {
	declare export type RecordState = 'EXISTENT' \| 'NONEXISTENT' \| 'UNKNOWN';

	declare export type onCompleted = (response: ?Object, errors: ?Array<PayloadError>) => void
	declare export type onError = (error: Error) => void

	declare export type CommitOptions = {
	onCompleted: onCompleted,

	import { createStore, applyMiddleware } from 'redux';
	import { Observable, Subject } from 'rxjs';

	const api = type => {
	console.log(`calling API ${type}`);
	return new Promise(res => setTimeout(() => res(), 500));
	};

	const actionOrder = (actions, order) => actions.every((action, index) => action.type === order[index]);
	const actionPredicate = actions => filterableAction => actions.some(action => action === filterableAction.type);