React Cheat Sheet
Complete reference guide for React with interactive examples and live playground links
Click on any section to jump directly to it
Basic Concepts
Component Basics
Basic component definitions and usage
React
// Function Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Arrow Function Component
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};
// Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// Using components
function App() {
return (
<div>
<Welcome name="John" />
<Welcome name="Jane" />
</div>
);
}Props and State
Working with props and state
React
// Props
function UserProfile(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Role: {props.role}</p>
</div>
);
}
// State in Class Component
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
// State in Function Component
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}Event Handling
Handling events in React components
React
// Basic event handling
function Button() {
const handleClick = (event) => {
console.log('Button clicked!', event);
};
return <button onClick={handleClick}>Click me</button>;
}
// Event with parameters
function ButtonList() {
const handleClick = (id) => {
console.log('Button', id, 'clicked!');
};
return (
<div>
<button onClick={() => handleClick(1)}>Button 1</button>
<button onClick={() => handleClick(2)}>Button 2</button>
</div>
);
}
// Form handling
function Form() {
const [value, setValue] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
console.log('Form submitted:', value);
};
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}React Hooks
useState
Managing state with useState hook
React
// Basic useState
const [count, setCount] = useState(0);
// Multiple state variables
const [name, setName] = useState('');
const [age, setAge] = useState(0);
// Object state
const [user, setUser] = useState({
name: '',
age: 0,
email: ''
});
// Updating object state
setUser(prevUser => ({
...prevUser,
name: 'John'
}));
// Functional updates
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);useEffect
Handling side effects with useEffect hook
React
// Basic effect
useEffect(() => {
document.title = `Count: ${count}`;
});
// Effect with cleanup
useEffect(() => {
const subscription = someAPI.subscribe();
return () => {
subscription.unsubscribe();
};
}, []);
// Effect with dependencies
useEffect(() => {
fetchUserData(userId);
}, [userId]);
// Multiple effects
useEffect(() => {
// Effect 1
}, [dep1]);
useEffect(() => {
// Effect 2
}, [dep2]);useContext
Working with context using useContext hook
React
// Create context
const ThemeContext = React.createContext('light');
// Context provider
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
// Using context
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Themed Button</button>;
}
// Custom context hook
function useTheme() {
const theme = useContext(ThemeContext);
if (theme === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return theme;
}useReducer
State management with useReducer hook
React
// Reducer function
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
// Using useReducer
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}Custom Hooks
Creating and using custom hooks
React
// Custom hook for window size
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
// Custom hook for data fetching
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}Advanced Patterns
Higher-Order Components
Creating and using Higher-Order Components
React
// HOC for authentication
function withAuth(WrappedComponent) {
return function WithAuthComponent(props) {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
// Check authentication
checkAuth().then(setIsAuthenticated);
}, []);
if (!isAuthenticated) {
return <div>Please log in</div>;
}
return <WrappedComponent {...props} />;
};
}
// Using HOC
const ProtectedComponent = withAuth(MyComponent);
// HOC with additional props
function withData(WrappedComponent, selectData) {
return function WithDataComponent(props) {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await selectData();
setData(result);
};
fetchData();
}, []);
return <WrappedComponent {...props} data={data} />;
};
}Render Props
Implementing render props pattern
React
// Render prop component
class MouseTracker extends React.Component {
state = { x: 0, y: 0 };
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
});
};
render() {
return (
<div onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}
// Using render prop
function App() {
return (
<MouseTracker
render={({ x, y }) => (
<h1>
Mouse position: {x}, {y}
</h1>
)}
/>
);
}
// Function as children
function MouseTracker({ children }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({
x: event.clientX,
y: event.clientY
});
};
return (
<div onMouseMove={handleMouseMove}>
{children(position)}
</div>
);
}Performance Optimization
Performance optimization techniques
React
// React.memo
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});
// useMemo
function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
return expensiveOperation(data);
}, [data]);
return <div>{processedData}</div>;
}
// useCallback
function ParentComponent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
return <ChildComponent onClick={handleClick} />;
}
// Code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}Routing
React Router
Implementing routing with React Router
React
// Basic routing
import { BrowserRouter, Route, Switch } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/users/:id" component={UserProfile} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
);
}
// Navigation
function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/users/123">User Profile</Link>
</nav>
);
}
// Route parameters
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
// Protected routes
function PrivateRoute({ children, ...rest }) {
const auth = useAuth();
return (
<Route
{...rest}
render={({ location }) =>
auth ? (
children
) : (
<Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>
)
}
/>
);
}State Management
Redux
State management with Redux
React
// Action creators
const increment = () => ({
type: 'INCREMENT'
});
const setUser = (user) => ({
type: 'SET_USER',
payload: user
});
// Reducer
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'SET_USER':
return { ...state, user: action.payload };
default:
return state;
}
}
// Store
const store = createStore(reducer);
// Using Redux in components
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
Count: {count}
<button onClick={() => dispatch(increment())}>
Increment
</button>
</div>
);
}Context API
State management with Context API
React
// Create context
const UserContext = React.createContext();
// Context provider
function UserProvider({ children }) {
const [user, setUser] = useState(null);
const value = {
user,
setUser,
login: (userData) => setUser(userData),
logout: () => setUser(null)
};
return (
<UserContext.Provider value={value}>
{children}
</UserContext.Provider>
);
}
// Custom hook
function useUser() {
const context = useContext(UserContext);
if (!context) {
throw new Error('useUser must be used within UserProvider');
}
return context;
}
// Using context
function UserProfile() {
const { user, logout } = useUser();
return (
<div>
<h1>Welcome, {user.name}</h1>
<button onClick={logout}>Logout</button>
</div>
);
}React - Interactive Developer Reference
Hover over code blocks to copy or run in live playground