React: I started my career with React 16

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 :-

1. Reconciliation — the process of updating the DOM in response to changes in state or props
2. React Fibre — a backwards compatible, complete rewrite of the React core. Fiber Reconciler is the new reconciliation algorithm in React.