React Newsletter #65

Building UIs with pure functions, improving first time load of a React app, and three things to learn about working with data in Redux


Articles

Building User Interfaces with Pure Functions and Function Composition in React

One of the best parts of React.js is that you can use the same intuition that you have about functions for when to create new React components. This article breaks it down.

Improving first time load of a Production React App

This is a story of how the load time of the UrbanClap website went from 13+ seconds to less than 5 seconds (3G Singapore Server on Mobile) in a month.

3 Things I Learned About Working with Data in Redux

In this article Nick describes some important things he's learned while building a Redux app with Bleacher Report.

Roll the Dice: Random Numbers in Redux

How would you model something like Math.random() in redux? Dave Ceddia explains how he would.

React Storybook: Develop Beautiful User Interfaces with Ease

When you start a new front-end project, the first thing you usually do is create a beautiful design. You carefully plan and draw all of your UI components, as well as each state or effect they may have. However, during development, things usually start to change. New requirements, as well as unforeseen use cases pop up here and there. The initial beautiful component library cannot cover all of these requirements and you start to expand it with new designs.

Pavels Jelisejevs talks about how to design UIs with React Storybook.

Why GraphQL🏆 Is The Real MVP

Charles Mangwa talks about his adventures with GraphQL in his React Native app Wino. A really great look at what it's like to dive into GraphQL.

Level-up your dependencies in React

Leveling-up the state is perhaps the most useful React pattern. Apply it to your dependencies and you can get many benefits, like better tests, flow control and idempotent routes.


Tutorials

How OkCupid organizes its multi-page React app

There's no doubt okCupid has a large codebase. In this article they discuss their approach to a file structure that scales for any size project, is easy to reason about, and makes reusing code straightforward.

Hot reload all the things!

How to use Webpack to achieve Hot Module Replacement on the back and front-end for a more productive development environment.


Videos

Performance optimizations for React: round 2

This talk is a follow up to the blog Performance optimizations for React applications. It explores some of the pitfalls and performance problems with top down rendering and denormalized state. The talk also goes through using 'connected components' in order to have a nicer state story, and ultimately - superior performance.


made with ❤️ by ui.dev