Posts

Dynamic transitions with react-router and react-transition-group

Image
Let’s describe the problem first, we’ll discuss about the solution with some example code to cover it in this article.  React-router and react-transition-group are two widely used libraries that can be combined to create transitions between routes.  However, in react-transition-group, once a component is mounted, its exit animation is specified, not changeable. Thus, dealing with transitions depending  of the next state (what we call dynamic transitions) is challenging with this library. The exiting transition of state A does not depend only from state A (“dynamic transition”) it is not easy to tweak it to create more sophisticated use cases such as dynamic transitions. In this article, we’ll explain how to do so thanks to react-router v4 and react-transition-group v2. 1. Understanding the simple example If you are on your way developing transitions between pages of your react app, you might have already met this code snippet. (adapted with state A/B): ...
Post a Comment
Read more

The future of React / ReactJS - React Fiber

Image
Facebook is one of the world’s most powerful company and has created a framework called React.js for building web apps. React.js respectively appear to be in a battle for the future of the web, with the active online debate and adoption of large consumer-facing apps seeming to lean quite strongly in React.js’s favor at present. React.js is getting so much popularity that it is unlikely to be replaced in the near future. React also embraces unidirectional data flows through Flux architecture. Stacks like Firebase are getting popular, thanks to React community. Today, there are many updates that have been in the pipeline for the last few months are finally released. Among the updates are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size. There are few updates in  React v16.0.0  as listed below. Better error handling Previously, run-time err...
Post a Comment
Read more

Using Reselect Selectors for Encapsulation and Performance with Redux

Image
An overview of why and how to use Reselect with React and Redux In a good Redux architecture, you are encouraged to keep your store state minimal, and derive data from the state as needed. As part of that process, we recommend that you use “selector functions” in your application, and use the Reselect library to help create those selectors. Here’s a depth detail of correct use of Reselect. Basics of Selectors A “selector function” is simply any function that accepts the Redux store state (or part of the state) as an argument, and returns data that is based on that state. Selectors don’t have to be written using a special library, and it doesn’t matter whether you write them as arrow functions or the  function  keyword. For example, these are all selectors: const selectEntities = state = > state . entities ; function selectItemIds ( state ) { return state . items . map ( item = > item . id ) ; } const selectSomeSpecificField = state = > s...
Post a Comment
Read more