Functions as Child Components and Higher Order Components

I have recently been on a Higher Order Component (HOC) craze. HOCs are a good tool for implementing cross-cutting concerns or common functionalities, such as logging and tracking. For more information on HOCs, check out this recent post by my colleague Mehdi Mollaverdi!

Then I discovered Functions as Child Components (FaCC) and a couple of my brain cells perished. FaCC’s are components that receive a function as their child. For example:

So let’s take a trip through struggle town.

Continue reading

Singletons Suck (aka Flux to Redux)

As previously mentioned (see ReactJS – Real World Examples of Higher-Order Components), we are currently re-building the core property experience with ReactJS. While ReactJS may be the shiniest of a long line of JavaScript frameworks (see Derek Zoolander meme), we have been careful about pulling in new “hot right now” libraries until we felt the pain and really needed them. Cue Flux.


Continue reading

ReactJS – Real World Examples of Higher-Order Components

A Little Bit of Background

Here at REA Group, we've recently been working on a new UI for the core property search experience on We've been building this UI as a universal javascript application, supporting both server-side and client-side rendering, using NodeJS and ReactJS.

During this project, we came across a few different use cases for some cross-cutting concerns, such as page load tracking, toggling new features on and off, and desktop/mobile toggling. We wanted to implement these in a generic and reusable way to avoid code duplication. For example, we had different pages (routes) in our application, and wanted to track user visits to those pages, but didn't want to duplicate this tracking code for every route.

We initially used React mixins for some of these problem, but ended up replacing it with higher-order components. In this blog post, I'll first provide a brief introduction to higher-order components (HOCs), and will then go through our journey for each use case and will explain each of the aforementioned techniques (mixins and higher-order component) in more details.

Continue reading

Painless JavaScript testing? Surely you Jest!


Hark! What is this Jest you speak of?

Jest is an open source JavaScript testing framework built on top of Jasmine, developed by Facebook. Try saying that 10 times fast.

Think of it as several layers of improvement stuck on top of Jasmine. Some of the neat features Jest provides are:

  • Automatically finds tests to run in your project
  • Has in built support for fake DOM APIs, such as jsdom, that you can run from the command line
  • You can test asynchronous code more easily using inbuilt mocked timer functions
  • Tests are run in parallel so they go faster! Vroom vroom.

But the big drawcard is Jest’s automatic mocking of CommonJS dependencies using the require() function. Instead of specifying all the dependencies you want mocked, you do the opposite. For the subject under test, you just use jest.dontMock().

Easy peasy, right? Come with me dear reader, as I spin you a yarn… Two JavaScript test frameworks walk into a bar… Continue reading

Playing with Flux

Co-authored: Daniel Stankevich

TL;DR: React is better if you use Flux…

Our Journey with React

Having recently decided to embrace React.js for some of our front end applications we soon reached the limitations of simply wiring components together. When you start with a simple React application you will create many components. At some point a change in one of these components will need to update another component. eg. If you change a Price text field, you need to change the page title to reflect that. Continue reading