Andrey Antukh niwinz

React - Functional error boundaries

Thanks to React hooks you have now happily turned all your classes into functional components.

Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.

There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.

Proposed solution

Tuning ZFS + Postgres to outperform EXT4 + Postgres

Please refer to ZFS 2-3x slower than EXT4 to see how ZFS defaults + Postgres defaults severely underperform EXT4 defaults + Postgres defaults (and also to know more about the system on which these benchmarks were performed). This page documents how to tune ZFS + Postgres to give better performance for the tpcb-like benchmark.

BIG FAT WARNING

Please do not copy these settings blindly because I am myself not clear on why/how these settings had the impact they did. For example, I cannot explain why full_page_writes=off independently did not give that much boost, nor did an optimized PG configuration. However, putting both of them together gave a 2-4x boost compared to baseline numbers.

Benchmark results

Rich Already Answered That!

A list of commonly asked questions, design decisions, reasons why Clojure is the way it is as they were answered directly by Rich (even when from many years ago, those answers are pretty much valid today!). Feel free to point friends and colleagues here next time they ask (again). Answers are pasted verbatim (I've made small adjustments for readibility, but never changed a sentence) from mailing lists, articles, chats.

How to use:

The link in the table of content jumps at the copy of the answer on this page.
The link on the answer itself points back at the original post.

Table of Content

Not all random values are created equal - for security-related code, you need a specific kind of random value.

A summary of this article, if you don't want to read the entire thing:

Don't use Math.random(). There are extremely few cases where Math.random() is the right answer. Don't use it, unless you've read this entire article, and determined that it's necessary for your case.
Don't use crypto.getRandomBytes directly. While it's a CSPRNG, it's easy to bias the result when 'transforming' it, such that the output becomes more predictable.
If you want to generate random tokens or API keys: Use uuid, specifically the uuid.v4() method. Avoid node-uuid - it's not the same package, and doesn't produce reliably secure random values.
If you want to generate random numbers in a range: Use random-number-csprng.

You should seriously consider reading the entire article, though - it's


	#include <time.h>
	#include <stdio.h>
	#include <errno.h>
	#include <stdlib.h>
	#include <stdint.h>
	#include <sys/random.h>

	#define UUID_T_LENGTH (16)
	#define UNIX_TS_LENGTH (6)

	(require '[clojure.core.async.impl.protocols :as impl]
	'[clojure.core.async.impl.dispatch :as dispatch])

	;;=> nil

	(extend-type java.util.concurrent.CompletionStage
	impl/ReadPort
	(take! [this handler]
	(.whenCompleteAsync this
	(reify

	(ns asyncawait
	(:refer-clojure :exclude [await])
	(:require [cloroutine.core :refer [cr]]))

	(defmacro async [& body]
	`(js/Promise. (fn [s# f#]
	(spawn (cr {await thunk}
	(try (s# (do ~@body))
	(catch :default e# (f# e#))))))))

	(defmacro afor
	"Like for but eagerly builds a JS array.
	Usually for react consumption."
	[[item coll] & body]
	`(reduce (fn [neue# ~item]
	(.push neue# (do ~@body))
	neue#)
	(cljs.core/array) ~coll))

	(defmacro arfor

	;; implementing a React component in pure cljs, no reagent necessary
	;; using goog.object.extend to create a ES6 class that inherits from
	;; React.Component

	;; credit to @thheller

	(defn MyReact [props context updater]
	(this-as this
	(js/React.Component.call this props context updater)))

	// inifinite scrolling of content without extra wrappers
	const { render, findDOMNode } = ReactDOMFiber

	class App extends React.Component {
	render() {
	// wrap the root element with an Intersection Observer, exposing .observe for children
	return <Intersection>
	<div style={{ height: 200, overflow: 'auto' }}>
	<Page offset={0} count={10} />
	</div>