When it comes to frontend development, one of the names you will always hear is React.
Today, many services and apps are built on React — but why has it become so widely adopted?
In this article, we’ll explore the evolution from jQuery to React, break down React’s fundamentals (function components, JSX, virtual DOM), and then dive into Hooks and re-rendering optimizations.
1. The Relationship Between JavaScript and React
JavaScript is the foundation for dynamic behavior on the web.
React is a JavaScript library designed to build user interfaces more efficiently.
Unlike jQuery, which directly manipulates the DOM, React provides a system to synchronize state and UI, which makes it far easier to build scalable, maintainable apps.
2. From jQuery to React
Advantages of jQuery
- Simplified DOM manipulation (
$("#id")) - Cross-browser compatibility
- Perfect for small websites with quick effects and Ajax
Disadvantages of jQuery
- Hard to manage state in large applications
- Code often turns into “spaghetti” as the app grows
- Performance issues due to direct DOM manipulation
Why Developers Moved to React
- The rise of Single Page Applications (SPAs) required better state management
- A need for reusable, component-based UI development
- Virtual DOM provided faster rendering and better performance
👉 Small-scale = jQuery worked fine.
Large-scale = React became the natural choice.
3. What is React?
React (React.js) is a UI library developed by Meta (formerly Facebook).
It allows developers to build apps with a component-based architecture, making UI reusable and easier to maintain.
Advantages of React
- Component-based design
- Declarative UI (describe what UI should look like for a given state)
- Multi-platform (e.g., React Native for mobile)
- Fast rendering with Virtual DOM
Disadvantages of React
- Steep learning curve (JSX, ES6, Hooks)
- Initial setup can be complex (Webpack, Babel required)
- Doesn’t always play well with jQuery plugins
4. What is a Function Component?
In React, UI is divided into components, reusable pieces of the interface.
There are two ways to define them: function components and class components.
Function Component
function Hello({ name }) {
return <h1>Hello, {name}!</h1>;
}
- Defined as a simple JavaScript function
- Accepts
propsas arguments and returns JSX
Class Component
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
Differences and Today’s Standard
- In the past, only class components could manage state and lifecycle methods
- With Hooks, function components can now manage state too
- Function components are simpler, lighter, and now the preferred standard
5. DOM vs Virtual DOM
DOM
The tree structure generated by the browser from HTML and CSS.
Direct manipulation is possible, but expensive in terms of performance.
Virtual DOM
React maintains a lightweight copy of the DOM in memory.
When updates happen, React compares the new Virtual DOM with the old one and applies only the differences to the real DOM.
👉 This makes rendering much faster.
6. JSX (JavaScript XML)
What is JSX?
JSX allows you to write HTML-like code directly inside JavaScript.
const name = "React";
const element = <h1>Hello, {name}!</h1>;
Behind the scenes, this is transformed into:
const element = React.createElement("h1", null, `Hello, ${name}!`);
JSX Features
- Must return a single root element
- JavaScript expressions can be embedded with
{} - Attributes use camelCase (
className,onClick)
Benefits of JSX
- Intuitive, HTML-like syntax
- Strong integration with JavaScript
- Works well with IDEs and type-checking tools
7. Introduction to Hooks
Hooks allow function components to manage state and side effects.
useState (State Management)
const [count, setCount] = useState(0);
Updating state triggers re-rendering of the component.
useEffect (Side Effects)
useEffect(() => {
console.log("Runs after initial render");
}, []);
Handles effects like API calls, timers, and cleanup.
useMemo (Memoization)
const result = useMemo(() => heavyCalc(num), [num]);
Caches expensive calculations to avoid unnecessary recomputation.
useCallback & React.memo
-
useCallback: memoizes functions so props don’t change unnecessarily -
React.memo: prevents child components from re-rendering unless props change
8. Re-Rendering and Optimization
What Re-Rendering Means
- When you update state via
useState, the function component runs again - React generates new JSX, compares Virtual DOM, and updates only the differences in the real DOM
Parent and Child Components
- If a parent’s state updates, the parent re-renders → the child is re-evaluated too
- However, if props don’t change, the actual DOM update is skipped
When to Use React.memo
- ✅ Expensive-to-render child components
- ✅ Parent re-renders often but child props rarely change
- ❌ Small or frequently changing components don’t benefit much
9. Conclusion
- Moving from jQuery to React solved problems of state management and DOM performance
- React’s core features: component-based architecture, declarative UI, virtual DOM
- Function components + Hooks are the modern standard for building React apps
- JSX makes UI description intuitive and tightly integrated with JavaScript
- Re-rendering is unavoidable, but you can optimize it with
React.memo,useMemo, anduseCallback
👉 The essence of React is “synchronizing state and UI in a simple, efficient way.”
We’ve evolved from jQuery’s manual DOM manipulation to React’s declarative model, achieving cleaner, more scalable development.
If you’re comfortable with these basics, the next step is exploring React Router (for routing) and Redux or Context (for advanced state management).
Top comments (1)
so helpful