Rendering is the process of converting React components into UI that users can see in the browser.
This module covers:
When React executes a component and displays its UI, it is called rendering.
Example:
function App() {
return (
<h1>
Hello React
</h1>
);
}
React renders:
<h1>Hello React</h1>
in the browser.
Component
↓
JSX
↓
Virtual DOM
↓
Real DOM
↓
Browser Display
React automatically re-renders components when:
Example:
const [
count,
setCount
] = useState(0);
When:
setCount(count + 1);
React re-renders the component.
Applications often display collections of data.
Examples include:
React commonly uses arrays and the map() method to render lists.
const fruits = [
"Apple",
"Mango",
"Banana"
];
function App() {
return (
<ul>
{
fruits.map(
fruit => (
<li>
{fruit}
</li>
)
)
}
</ul>
);
}
Output:
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>
React requires every rendered list item to have a unique key.
fruits.map(
fruit => (
<li>
{fruit}
</li>
)
);
React Warning:
Each child should have a unique key
fruits.map(
(fruit, index) => (
<li key={index}>
{fruit}
</li>
)
);
const users = [
{
id: 1,
name: "Samir"
},
{
id: 2,
name: "Ram"
}
];
users.map(
user => (
<li key={user.id}>
{user.name}
</li>
)
);
Keys help React:
Events allow React to respond to user interactions.
Examples:
function App() {
function handleClick() {
console.log(
"Clicked"
);
}
return (
<button
onClick={handleClick}
>
Click Me
</button>
);
}
Output:
Clicked
<button
onClick={() => {
console.log(
"Clicked"
);
}}
>
Click
</button>
function App() {
return (
<input
onChange={
(event) => {
console.log(
event.target.value
);
}
}
/>
);
}
function App() {
const handleSubmit = (event) => {
event.preventDefault();
console.log(
"Submitted"
);
};
return (
<form
onSubmit={handleSubmit}
>
<button>
Submit
</button>
</form>
);
}
| Event | Purpose |
|---|---|
| onClick | Mouse click |
| onChange | Input change |
| onSubmit | Form submission |
| onFocus | Focus element |
| onBlur | Leave element |
| onKeyDown | Key pressed |
| onMouseEnter | Mouse hover begins |
Refs provide direct access to DOM elements.
React usually manages the DOM automatically, but sometimes direct access is required.
Examples:
Import:
import {
useRef
}
from "react";
Create the ref:
const inputRef =
useRef(null);
Attach it:
<input
ref={inputRef}
/>
Access the DOM element:
inputRef.current
Returns:
<input />
import {
useRef
}
from "react";
function App() {
const inputRef =
useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input
ref={inputRef}
/>
<button
onClick={focusInput}
>
Focus
</button>
</>
);
}
Lifecycle describes the stages a component goes through during its existence.
Mounting
↓
Updating
↓
Unmounting
The component is created and added to the DOM.
Component Appears
Occurs when:
React re-renders the component.
The component is removed from the DOM.
Component Disappears
Functional components use the useEffect() hook to work with lifecycle events.
import {
useEffect
}
from "react";
function App() {
useEffect(() => {
console.log(
"Mounted"
);
}, []);
}
Output:
Mounted
Runs only once.
useEffect(() => {
console.log(
"Updated"
);
}, [count]);
Runs whenever:
count
changes.
useEffect(() => {
return () => {
console.log(
"Unmounted"
);
};
}, []);
Mount
↓
Update
↓
Unmount
Render Props is a pattern for sharing logic between components.
A component receives a function as a prop and uses that function to decide what to render.
function DataProvider({
render
}) {
const user = {
name: "Samir"
};
return render(user);
}
Usage:
<DataProvider
render={
user => (
<h1>
{user.name}
</h1>
)
}
/>
Output:
Samir
Render Props allow:
Component
↓
Provides Data
↓
Render Function
↓
Custom UI
A Higher Order Component (HOC) is a function that takes a component and returns a new enhanced component.
Component
↓
HOC
↓
Enhanced Component
function withLogger(
Component
) {
return function() {
console.log(
"Rendered"
);
return <Component />;
};
}
Component:
function User() {
return (
<h1>
User
</h1>
);
}
Enhanced component:
const UserWithLogger =
withLogger(User);
Usage:
<UserWithLogger />
Output:
Rendered
User
Authentication wrapper:
function withAuth(
Component
) {
return function(props) {
const isLoggedIn = true;
if (!isLoggedIn) {
return (
<h1>
Login
</h1>
);
}
return (
<Component
{...props}
/>
);
};
}
Usage:
const ProtectedDashboard =
withAuth(
Dashboard
);
Higher Order Components are commonly used for:
| Render Props | Higher Order Components |
|---|---|
| Function prop | Wrapper function |
| More flexible | Cleaner usage |
| Can cause nesting | Easier composition |
| Explicit logic sharing | Component enhancement |
function App() {
const users = [
{
id: 1,
name: "Samir"
},
{
id: 2,
name: "Ram"
}
];
return (
<ul>
{
users.map(
user => (
<li
key={user.id}
>
{user.name}
</li>
)
)
}
</ul>
);
}
Flow:
Array
↓
map()
↓
JSX
↓
React Render
↓
DOM Update
Good:
key={user.id}
Avoid:
key={Math.random()}
Stable keys help React efficiently update the UI.
Good:
inputRef.current.focus();
Avoid manipulating the DOM more than necessary.
useEffect(() => {
const timer =
setInterval(() => {
}, 1000);
return () => {
clearInterval(
timer
);
};
}, []);
Always clean up timers, subscriptions, or event listeners.
Modern React applications often use:
instead of complex Higher Order Components.
| Concept | Purpose |
|---|---|
| Rendering | Display UI |
| Lists | Render collections |
| Keys | Unique list identifiers |
| Events | User interactions |
| Refs | Access DOM elements |
| Lifecycle | Component stages |
| useEffect | Lifecycle management |
| Render Props | Share logic via functions |
| HOC | Enhance components |
React rendering revolves around:
Data
↓
JSX
↓
Render
↓
DOM
Modern React applications frequently use:
Lists & Keys
↓
Dynamic UI
Events
↓
User Interaction
Refs
↓
DOM Access
useEffect
↓
Lifecycle Management
Render Props / HOCs
↓
Logic Reuse
These concepts form the bridge between basic React components and advanced React patterns used in real-world applications.