Reason React’s 16-Child Limit

switch children { | [] => createCompositeElementInternalHack comp props [] | [a] => createCompositeElementInternalHack comp props [a] | [a, b] => createCompositeElementInternalHack comp props [a, b] | [a, b, c] => createCompositeElementInternalHack comp props [a, b, c] | [a, b, c, d] => createCompositeElementInternalHack comp props [a, b, c, d] | [a, b, c, d, e] => createCompositeElementInternalHack comp props [a, b, c, d, e] | [a, b, c, d, e, f] => createCompositeElementInternalHack comp props [a, b, c, d, e, f] | [a, b, c, d, e, f, g] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g] | [a, b, c, d, e, f, g, h] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h] | [a, b, c, d, e, f, g, h, i] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i] | [a, b, c, d, e, f, g, h, i, j] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j] | [a, b, c, d, e, f, g, h, i, j, k] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k] | [a, b, c, d, e, f, g, h, i, j, k, l] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l] | [a, b, c, d, e, f, g, h, i, j, k, l, m] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l, m] | [a, b, c, d, e, f, g, h, i, j, k, l, m, n] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l, m, n] | [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o] | [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p] | [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q] => createCompositeElementInternalHack comp props [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q] | _ => /* 16 is a good number because it fills the cache line. Just kidding, submit an issue if you want more */ let msg = "Reason allows up to 17 static children (but dynamic children in an array can be unlimited in size). You have " ^ string_of_int (List.length children) ^ ", please put them in an array and assign key to the elements. Sorry for the raise (Invalid_argument msg) };

A browser screenshot shows a Reason React source file containing an enormous pattern match that manually handles arrays of children from zero through seventeen elements. The joke is that the code pretends to impose a precise static-child limit, then admits the limit is arbitrary and tells developers to use an array for more children. It is a reaction for absurdly overengineered code and tedious edge-case handling.

• @profunctor_io / 165 2017-03-17