Intermediate LevelReact JS & React 19
What is Declarative Programming in React and how does it contrast with Imperative DOM manipulation?
❓ Interview Prompt: Compare Imperative programming (step-by-step DOM mutation scripts) vs Declarative programming (describing target UI state in JSX).
1. Imperative Programming (Vanilla JS / jQuery):
Directly tells the browser HOW to mutate DOM nodes step-by-step ('element.classList.add('active'); element.innerText = 'Updated'').
2. Declarative Programming (React):
Describes WHAT the UI should look like for a given state in JSX ('<button className={isActive ? 'active' : ''}>{text}</button>').
•
You update state; React handles step-by-step DOM mutations automatically!
Code Implementation Example
jsx
// Declarative React: UI is a pure function of State!
function DeclarativeToggle() {
const [isActive, setIsActive] = useState(false);
// Describe UI target state declaratively based on 'isActive'
return (
<button
className={isActive ? 'btn-active' : 'btn-inactive'}
onClick={() => setIsActive(!isActive)}
>
{isActive ? 'Active' : 'Inactive'}
</button>
);
}💡Declarative UI representation based on component state.
🎯 Interview Key Takeaway
React uses declarative programming: you manage component state, and React handles DOM updates automatically.
#Declarative#Imperative#Concepts#Intermediate
Back to all React JS & React 19 Questions→