RichieAHB

React "prop-drilling"

Having worked with React since the early days, I've seen a lot of ways or writing and structuring components. Whether it's the Component / Container (aka. smart / dumb) pattern, the state-management wars of the late teens, the sprinkling of Contexts everywhere or obviously hooks there's always some debate between teammates about libraries, lint rules or patterns. However, the one thing that's been there, quietly, for a long time now is the term "prop drilling".

What is prop-drilling

Prop drilling is the idea of having to push a prop through a large component tree right down to a node that is many components deep through layers of components that don't care about that prop. For example:

const FilterButton = ({ onClick, ['aria-label']: filterButtonAriaLabel }) => (

RichieAHB

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

RichieAHB

import { hook, useState, useEffect } from 'react';
import { myMemoize } from './utils/my-memoize';
import CountsAPI from './services/count-api';

const Comp = (props, [counter, setCounter], [name, setName]) => <div />;

// hook(...stateful)(...effectful)

/*
* statefuls are functions that have access to props (and maybe the previous state?), reducers could be here too. What they return could be a variety of things but they allow react internals to pass the the value and updater to the following hooks and component

RichieAHB

const crypto = require("crypto");
const memoize = require("fast-memoize");
const levenshtein = require("js-levenshtein");

const createInts = n => Array.from({ length: n }, (_, i) => i);

const trace = memoize(i =>
  crypto
    .createHash("sha1")
    .update(`${i}`)

RichieAHB

import React from 'react';
import { render } from 'react-dom';
import memoize from "lodash.memoize";

const somethingExpensive = iters => {
  const arr = [];
  for (let i = 0; i < iters; i += 1) {
    arr.push(Math.random());
    arr.sort(); // ¯\_(ツ)_/¯
  }

RichieAHB

const Effect = (type, val) => ({ type, val });

const run = gen => {
  let r;
  while (!(r = gen.next()).done) {}
  return r.value;
};

function* handle(fn, map = {}) {
  const gen = fn();

RichieAHB

<?php if ( function_exists( 'have_rows' ) && have_rows( 'page_section' ) ) : ?>

	<?php while ( have_rows( 'page_section' ) ) : the_row(); ?>

		<?php get_template_part( 'content', 'page-section' ); ?>

	<?php endwhile; ?>

	<?php if (is_front_page() && count( get_field( 'page_section' ) ) > 1) : ?>

RichieAHB

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$px-only: true;
$pixelBase : 16; /* 1 */
$visual-grid-breakpoints: '';
$grid-columns: 12;