[React] Rendering in React

Suan — Tue, 20 Jun 2023 04:57:26 +0000

🧚🏻‍♀️ Understanding Rendering in React

Motivation

I've been working on projects using React for some time now, but I've realized that if someone were to ask me, "How does React work?" I would probably freeze up and feel dumbest. Being a visual learner myself, I've decided to break it down from the basic part of React using diagrams and example codes to make it easier to understand.

What is Rendering?

Rendering refers to the process of generating and displaying the final output of a web application or user interface.

Rendering in React

In React, rendering specifically refers to how React updates and displays components on the screen based on changes in their state or props.

Initial Rendering

Let’s take a look at how React performs its initial render.

React uses root.render() method to initially display components, represented by JSX or React nodes, inside the browser's DOM.

If your app is fully built with React, your code will look like this:

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Once you run this code, it will

Find the browser DOM node(root) defined in your HTML.
Display the React component for your app inside.

After the initial rendering, React re-renders its components only when there are changes to the state or props of the components.

Below are the visualised flow charts of React initial render(mounting) and re-render process.

Rendering seems more complicated than root.render()?

With the understanding of Virtual DOM, you'll get a bit more idea.

Virtual DOM?

The Virtual DOM is a concept used by React to optimise the process of updating the user interface. It is a lightweight, in-memory representation of the actual browser DOM (Document Object Model).

During initial render, React creates a Virtual DOM representation of the UI, takes the React elements and converts them into corresponding DOM elements. This conversion process involves creating the necessary DOM nodes and assigning properties and attributes to them based on the React elements. React then inject Virtual DOM elements to browser’s actual DOM elements.

Re-Rendering

As described above, React re-renders the component(s) only when it needs to. Here is the process of re-rendering.

React invokes the component's render method or functional component body to generate a new virtual DOM representation of the component.
React creates a new Virtual DOM and compares it to exisiting Virtual DOM using **diffing algorithm.** (Reconciliation)
Once the diffing process identifies the differences between the previous and new virtual DOM, React applies the necessary changes, or "patches," to the actual DOM to reflect the updates made in the virtual DOM.

When Does React Re-Render?

When there are changes to component’s props or **states**
When the context value changes
When parent component re-renders

A Toe Dip Into Reconciliation
In short, it is the process of comparing the previous state of a component's rendered output (virtual DOM) with the new state and determining the minimal set of changes needed to update the UI. React uses the diffing algorithm to perform the comparison.
React implements a heuristic algorithm based on the following two assumptions, resulting in an O(n) time complexity:
1. Different types of elements create different trees.
For elements of the same type, only the changed attributes are updated.
2. Developers can use the key prop to identify component instances and indicate which child elements should not be changed between multiple renders.
By comparing and updating only the necessary parts of the DOM, React minimizes the performance impact and improves the efficiency of rendering, resulting in a more responsive and optimized user interface.

Conclusion

In this blog post, I've taken the time to simplify the fundamentals of React rendering using visuals and practical examples. By breaking down the rendering process and explaining concepts like initial rendering, the Virtual DOM, and re-rendering, I hope that I have provided a clearer understanding of how React works.

Happy coding!

[Next.js] User authentication using Cookies with JWT vs NextAuth

Suan — Tue, 20 Jun 2023 04:40:42 +0000

Which Auth Do I Use For My Next.js App?

Motivation

During the development of my web app "Project Managed," which I built following a tutorial on Frontend Masters, I came across an interesting question: Why did the tutorial use cookies for user authentication instead of NextAuth? This sparked my curiosity, and I began researching to find an answer.

Comparison: Cookies with JWT vs NextAuth for User Authentication

	Cookies with JWT	NextAuth
Implementation	Manual handling of JWT and cookies	Leveraging NextAuth library
JWT Management	Custom implementation required	Handled by NextAuth
Authentication	Custom server-side validation	NextAuth handles validation
Authorization	Custom implementation required	NextAuth provides solutions
Session Management	Manual handling of sessions	NextAuth handles sessions
Security	Can set HttpOnly flag for cookies	Provides built-in security
Token Inclusion	Manual inclusion in each request	Automatic inclusion with cookies
Scalability	Requires custom scaling and management	Simplified scalability and management
Ecosystem	Works with any server-side framework or technology	Built for Next.js ecosystem
Complexity	Moderate complexity, requires understanding of JWT handling	Simplifies authentication implementation
Flexibility	Provides more control over token management and customisation	Offers predefined solutions and flexibility within NextAuth
Development Time	Requires additional development time for implementation	Can save development time with built-in functionality
Community Support	Wider community support and resources available	Active community and support for NextAuth

Cookies with JWT: Provides manual handling of JWT and cookies, requires custom implementation for token management and session handling, offers security benefits with the ability to set HttpOnly flag, and allows for more control and flexibility at the cost of moderate complexity and additional development time.
NextAuth: Simplifies authentication implementation with built-in solutions for token validation, session management, and security, offers automatic token inclusion with cookies, provides scalability and ecosystem compatibility within the Next.js framework, and saves development time with predefined functionality and active community support.

Conclusion

Through my exploration, I discovered that the choice between cookies and NextAuth is more a matter of preference rather than one being inherently better than the other. It’ll depend on individual preferences, project requirements, familiarity with the technologies involved, and the desired level of control, customisation, and simplicity in authentication implementation.

DEV Community: Suan

[React] Rendering in React

🧚🏻‍♀️ Understanding Rendering in React

Motivation

What is Rendering?

Rendering in React

Initial Rendering

Virtual DOM?

Re-Rendering

When Does React Re-Render?

Conclusion

[Next.js] User authentication using Cookies with JWT vs NextAuth

Which Auth Do I Use For My Next.js App?

Motivation

Comparison: Cookies with JWT vs NextAuth for User Authentication

Conclusion