React: I started my career with React 16
2 min readMar 11, 2024
My career started with the release of React 16 in 2017 and since then it has been with me. I think I can consider as my better half now.
So, lets see what React 16 offered me that I couldn’t say NO to it.
React 15 vs React 16 :-
1. Fiber Reconciliation Algorithm:
- React 15: Used the stack-based reconciliation algorithm.
- React 16: Introduced the Fiber architecture, a complete rewrite of the reconciliation algorithm, enabling better performance and asynchronous rendering.
2. Error Handling:
- React 15: Lacked comprehensive error boundaries, leading to full application crashes on JavaScript errors.
- React 16: Introduced Error Boundaries, allowing components to catch and handle errors within their subtree, preventing crashes and providing fallback UIs.
3. Rendering Improvements:
- React 15: Rendered components synchronously, leading to potential performance bottlenecks.
- React 16: Implemented asynchronous rendering with Fiber, enabling more efficient scheduling and prioritization of updates, resulting in smoother user experiences.
4. Return Values:
- React 15: Required a single root element in the return value of a component’s render method.
- React 16: Allowed returning arrays of elements or using React Fragments, eliminating the need for unnecessary container elements.
5. Portals:
- React 15: Didn’t support rendering components outside of their parent DOM hierarchy.
- React 16: Introduced portals, enabling components to render into a DOM node outside of their parent, useful for modals, tooltips, etc.
6. Server-Side Rendering (SSR):
- React 15: Supported SSR but lacked optimizations, leading to performance issues.
- React 16: Improved SSR performance and stability, facilitating faster initial page loads and better SEO.
7. Performance:
- React 15: Had limitations in handling large component trees and updates.
- React 16: Introduced performance improvements such as better handling of large component trees, reduced memory usage, and optimized event handling.
8. Event System:
- React 15: Utilized the synthetic event system, which had some inconsistencies across different browsers.
- React 16: Improved the event system for better performance and consistency across browsers and devices.
9. Custom DOM Attributes:
- React 15: Generated warnings when using custom DOM attributes.
- React 16: Allowed the use of custom DOM attributes without generating warnings, providing more flexibility.
Terminologies :-
- Reconciliation — the process of updating the DOM in response to changes in state or props
- React Fibre — a backwards compatible, complete rewrite of the React core. Fiber Reconciler is the new reconciliation algorithm in React.