New React Context API
I like new react API for creating and using context. It feels right. One thing I immediately tried to do was creating a helper which simplifies consuming multiple contexts. Because they create context hell. When you component uses more than one context and because of a children as a function pattern (which is basically the…
The best way of rendering a collection of items in React/Redux
In short The best way to render a collection in React, backed by Redux or other similar library: store a collection as an object where key is item id and value is item itself. That way when rendering collection, pass only item’s id to the item component. Than in item’s connected component query a collection…
Redirecting user back to protected page after signing (React/Redux)
In developing web applications it’s a common practice to redirect user to login page if he tries to visit protected route. It’s also cool to redirect user back to protected route after he has successfully authenticated. My approach in React/Redux is to (1) store a route endpoint in Redux state when unauthorized user attempts to…
Callback refs as componentDidMount in stateless functions in React
You might think that when developing user interfaces with React and if you want to e.g. apply jQuery method to an element, you must abandon your beloved stateless function in favor of class-based component, directly or indirectly via higher-order components, because stateless function doesn’t have componentDidMount life-cycle hook. You are wrong, you can use callback…
Reactive React component using MobX (counter example)
In the following (muted) video for beginners I show how simple it is to make a React component reactive using MobX. Component displays counter’s value and buttons for incrementing and decrementing it and when user clicks the buttons, value is updated on screen accordingly. The main takeaway from this example is this: when observable variables…