React Higher-Order Component Patterns in TypeScript

  • An example might be a HOC which enforces that styles are set for a component via the style prop, a simple example of this being the following withBlueBackground HOC, which we’ll use throughout this article, and, as the name suggests, ensures the background colour is blue for the wrapped component:Note:…
  • : React.CSSProperties; name: string;}The type variable P is then used to specify the props for the unwrapped component to be passed into the HOC:UnwrappedComponent: is just an alias for React.StatelessComponentP | React.ComponentP, which would allow either a stateless functional component or a class component to be passed into the HOC.Object.assign()…
  • You will also face this same issue if you want to destructure the props using object rest:In terms of usage, the HOC can then be used as if it were a plain JavaScript HOC, with the added bonus that the wrapped component is statically typed:Pattern #2: Adding PropsSome HOCs add props…
  • : React.CSSProperties; name: string;}This will be more useful when additional props are injected, and ones which aren’t standard React props such as style.As for the HOC’s own props (WithBlueBackgroundProps) these are combined with the wrapped component’s props using a type intersection operator () :class WithBlueBackground extends React.Component P WithBlueBackgroundProps { …}This…
  • To demonstrate this with the withBlueBackground HOC, we will change it to require a component passed in that accepts a backgroundColor prop rather than setting the colour via style:Given we changed HelloProps to extend InjectedBlueBackgroundProps in pattern #2, no changes will need to be made to it, but the Hello…

Higher-order components (HOCs) in React are a powerful tool for code reuse between components. However, a common complaint of developers using TypeScript is that they are difficult to set types for…
Continue reading “React Higher-Order Component Patterns in TypeScript”

Surprising polymorphism in React applications – Benedikt Meurer – Medium

Surprising polymorphism in #React applications by @bmeurer  #JavaScript #ReactJs

  • Looking at this code from a performance perspective, it seems to follow the principles for monomorphic code, i.e. keeping the object shape the same.Speaking naively the property accesses in render should be monomorphic, i.e. the state objects should have the same shape — map or hidden class in V8 speak — all the time, both s1 and s2 have id, text and completed properties in this order.
  • Each object literal — i.e. expression of the form {a:va,…,z:vb} defines a root map in the transition tree of maps (remember map is V8 speak for object shape).
  • So if you use an empty object literal {} than the transition tree root is a map that doesn’t contain any properties, whereas if you use {id:id, text:text, completed:completed} object literal, then the transition tree root is a map that contains these three properties.
  • Let’s look at a simplified example:You can run this code in Node.js passing the –allow-natives-syntax command line flag (which enables the use of the %HaveSameMap intrinsic), i.e.:So despite these objects a and b looking the same — having the same properties with the same types in the same order — they don’t have the same map.
  • This especially applies to common uses of Object.assign, for examplestill yields different maps, because the object b starts out as empty object (the {} literal) and Object.assign just slaps properties on it.This also applies if you use spread properties and transpile it using Babel, because Babel — and probably other transpilers as well — use Object.assign for spread properties.One way to avoid this is to consistently use Object.assign so that all objects start from the empty object literal.

Modern web applications based on the React framework usually manage their state via immutable data structures, i.e. using the popular Redux state container. This pattern has a couple of benefits and…
Continue reading “Surprising polymorphism in React applications – Benedikt Meurer – Medium”

Writing Software Patterns

  • Every author tends to make his own particular pattern form, but certain pattern forms have become more well-known.
  • The idea is that you have a body of patterns with a structure that leads you from pattern to pattern.
  • Once you look at two sets of patterns you realize hardly ever do two patterns authors use the same form.
  • Many people see Christopher Alexander’s A Pattern Language (APL) as an important influence in the patterns world.
  • The desire is reinforced by the chunking that patterns are about – a reader should only have to read that one pattern to understand the pattern.

I’ve spent a lot of my writing energy writing
patterns. From time to time I get asked questions about why I do
that and what makes a good pattern. This is a brief article about
how I look at patterns with my suggestions for people who are
interested in writing patterns themselves.
Continue reading “Writing Software Patterns”