React Cheat Sheet & Command Reference
A beginner-friendly React cheat sheet. Copy-paste examples, common mistakes, syntax guides, and interview questions for modern React developers.
Components
Components are reusable pieces of UI. A modern React component is simply a JavaScript function that returns JSX.
Syntax
function MyComponent() {
return <div>UI Elements here</div>;
}
export default MyComponent;Example
function Button() {
return <button className="btn">Click Me</button>;
}
function App() {
return (
<div>
<h1>My Site</h1>
<Button />
</div>
);
}Common Mistake
Forgetting to start component names with a Capital letter. React treats lowercase tags (like `<div>`) as standard HTML, and capitalized tags (like `<Button>`) as custom components.
Best Practice
Keep components small. If a component does more than one specific thing, split it into smaller components.
Interview Tip
Be able to explain the difference between Class Components and Functional Components. (Modern React uses Functional Components + Hooks almost exclusively).
JSX
JSX is a syntax extension that looks like HTML but is actually JavaScript. It allows you to write your UI structure right alongside your logic.
Syntax
const element = <h1>Hello, {name}!</h1>;Example
function Greeting() {
const user = "Alice";
const unreadCount = 3;
return (
<div className="card">
<h2>Welcome, {user}</h2>
<p>You have {unreadCount} messages.</p>
</div>
);
}Common Mistake
Trying to return multiple adjacent elements without a single parent wrapper. You must wrap them in a `<div>` or a Fragment `<>...</>`.
Best Practice
Use `className` instead of `class`, because `class` is a reserved word in JavaScript.
Interview Tip
Understand that JSX is just syntactic sugar. Under the hood, Babel transforms it into `React.createElement()` calls.
Props
Props (Properties) are how components talk to each other. You pass data from a Parent component down to a Child component using props. They are read-only.
Syntax
<ChildComponent propName="value" />Example
// Child
function UserCard({ name, role }) {
return <div>{name} is an {role}</div>;
}
// Parent
function App() {
return <UserCard name="Bob" role="Editor" />;
}Common Mistake
Trying to modify a prop inside the child component. Props are immutable. If data needs to change, it should be State.
Best Practice
Destructure your props in the function signature `function UserCard({ name, role })` instead of using `props.name` everywhere.
Interview Tip
Explain 'Prop Drilling'. It's when you have to pass a prop through many layers of components just to get it to a deeply nested child.
State (useState)
State represents data that can change over time (like a user typing in a form or a counter increasing). When state changes, React automatically re-renders the component to update the UI.
Syntax
const [state, setState] = useState(initialValue);Example
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}Common Mistake
Mutating state directly (e.g., `count = count + 1`). You MUST use the setter function `setCount(count + 1)` so React knows it needs to re-render.
Best Practice
If your new state relies on the old state, pass a function to the setter: `setCount(prevCount => prevCount + 1)`.
Interview Tip
Explain why state updates might be asynchronous. React batches state updates together for performance.
Side Effects (useEffect)
The `useEffect` hook lets you perform side effects (like fetching data, setting timers, or manually manipulating the DOM) after a component renders.
Syntax
useEffect(() => {
// Code to run
return () => { // Cleanup };
}, [dependencies]);Example
import { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://api.example.com/data")
.then(res => res.json())
.then(result => setData(result));
}, []); // Empty array = runs ONCE on load
return <div>{data.length} items loaded</div>;
}Common Mistake
Forgetting the dependency array entirely. If you leave it off, the effect runs after EVERY render, which can cause infinite fetching loops.
Best Practice
Always return a cleanup function if you start a timer `setInterval` or a subscription, otherwise you will cause memory leaks.
Interview Tip
Be prepared to explain the component lifecycle (Mount, Update, Unmount) and how `useEffect` maps to those phases.
Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level. It solves 'Prop Drilling'.
Syntax
const MyContext = createContext();
// Provide
<MyContext.Provider value={data}>
// Consume
const data = useContext(MyContext);Example
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
function Text() {
const { theme } = useContext(ThemeContext);
return <p>Theme is {theme}</p>;
}
function App() {
const [theme, setTheme] = useState('dark');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Text />
</ThemeContext.Provider>
);
}Common Mistake
Overusing Context for rapidly changing local state. When context value changes, EVERY component consuming it re-renders.
Best Practice
Use Context for truly global data like User Authentication, Themes, or Language preferences.
Interview Tip
When asked about state management, explain when you would use Context vs when you would use Redux or Zustand.
Frequently Asked Questions
Is React a Framework or a Library?
React is officially a UI Library because it only handles the View layer. However, its massive ecosystem makes it function like a framework.
What is the Virtual DOM?
It is a lightweight copy of the actual DOM. React uses it to calculate the most efficient way to update the browser, making React extremely fast.
Do I need to know JavaScript to learn React?
Yes! You should understand variables, arrays, objects, arrow functions, and destructuring before jumping into React.