Introduction to React Fiber

React was released with an update to React's core (Reconciler) algorithm. This new algorithm is called Fiber. Before diving deep into what is Fiber and how it works, it is must to know the React's reconciler algorithm as Fiber is nothing but the re-implementation of this previous algorithm. You can refer to the reconciler algorithm on React Official doc here. React ReconciliationIt's an algorithm that React uses to diff one tree with another to find which parts need to be updated in the next update. E.g. whenever the component's props or state gets updated, whether to make an actual

Understanding react-native-reanimated: A hands-on approach - Part 1

React-native's Animated library is a simple and powerful library to add animations in your react-native app. But it has few limitations when it comes to gesture-based interactions. To overcome these limitations, we have an alternative, react-native-reanimated library by Krzysztof Magiera Using react-native-reanimated, we declare our animations in JavaScript, in our React Native application code, but run them on UI thread. It provides much greater flexibility and control over our animations and is also backward compatible with the Animated library. But this flexibility comes at a cost of declarative syntax which involves a bit of learning curve. In this blog, we'll

Become Zero to Hero with React configuration, Webpack and Babel

In this article, we will dive deeper to understand how does React configurations work. We will also see how do things come to action in React which are usually not possible in plain JavaScript?