// Q1: Reusable Modal Component
import React, { useEffect } from 'react';
export function Modal({ isOpen, onClose, children }) {
useEffect(() => {
const handleEsc = (e) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, [onClose]);
if (!isOpen) return null;
return (
<div onClick={onClose} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background:
'rgba(0,0,0,0.5)' }}>
<div onClick={(e) => e.stopPropagation()} style={{ background: 'white', margin: '10% auto',
padding: 20, width: 300 }}>
{children}
</div>
</div>
);
// Q2: Counter Component
export function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
<button onClick={() => setCount((c) => c - 1)}>Decrement</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
// Q3: TodoList with useReducer
function todoReducer(state, action) {
switch (action.type) {
case 'add':
return [...state, { id: Date.now(), text: action.text, completed: false }];
case 'toggle':
return state.map((todo) =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
);
case 'remove':
return state.filter((todo) => todo.id !== action.id);
default:
return state;
export function TodoList() {
const [todos, dispatch] = React.useReducer(todoReducer, []);
const [text, setText] = React.useState('');
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<button onClick={() => dispatch({ type: 'add', text })}>Add</button>
<ul>
{todos.map((todo) => (
<li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
<button onClick={() => dispatch({ type: 'toggle', id: todo.id })}>Toggle</button>
<button onClick={() => dispatch({ type: 'remove', id: todo.id })}>Remove</button>
</li>
))}
</ul>
</div>
);
// Q4: useDebounce Hook
export function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = React.useState(value);
React.useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
// Q5: usePrevious Hook
export function usePrevious(value) {
const ref = React.useRef();
React.useEffect(() => {
ref.current = value;
});
return ref.current;
// Q6: Fetch user data
export function FetchUser() {
const [user, setUser] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
React.useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then((res) => res.json())
.then(setUser)
.catch(setError)
.finally(() => setLoading(false));
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error loading user.</p>;
return <div><h3>{user.name}</h3><p>{user.email}</p></div>;
// Q7: Countdown Timer
export function CountdownTimer() {
const [timeLeft, setTimeLeft] = React.useState(60);
React.useEffect(() => {
if (timeLeft === 0) return;
const interval = setInterval(() => setTimeLeft((t) => t - 1), 1000);
return () => clearInterval(interval);
}, [timeLeft]);
return <h1>{timeLeft}</h1>;
// Q8: ThemeContext Example
const ThemeContext = React.createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = React.useState('light');
const toggleTheme = () => setTheme((t) => (t === 'light' ? 'dark' : 'light'));
return <ThemeContext.Provider value={{ theme, toggleTheme
}}>{children}</ThemeContext.Provider>;
export function ThemedComponent() {
const { theme, toggleTheme } = React.useContext(ThemeContext);
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' :
'#fff' }}>
<p>Current Theme: {theme}</p>
<button onClick={toggleTheme}>Toggle</button>
</div>
);
// Q9: Live Form Preview
export function FormPreview() {
const [form, setForm] = React.useState({ name: '', email: '' });
const handleChange = (e) => {
setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
};
return (
<div>
<input name="name" onChange={handleChange} placeholder="Name" />
<input name="email" onChange={handleChange} placeholder="Email" />
<p>Preview: {form.name} - {form.email}</p>
</div>
);
// Q10: Optimized List
const ListItem = React.memo(({ item }) => <li>{item}</li>);
export function LargeList() {
const items = React.useMemo(() => Array.from({ length: 1000 }, (_, i) => `Item ${i}`), []);
const [filter, setFilter] = React.useState('');
const filteredItems = React.useMemo(() => items.filter((i) => i.includes(filter)), [items, filter]);
const onChange = React.useCallback((e) => setFilter(e.target.value), []);
return (
<div>
<input onChange={onChange} placeholder="Filter" />
<ul>{filteredItems.map((item) => <ListItem key={item} item={item} />)}</ul>
</div>
);
// Q11: Debounced GitHub User Search
export function GitHubUserSearch() {
const [input, setInput] = React.useState('');
const debounced = useDebounce(input, 500);
const [users, setUsers] = React.useState([]);
React.useEffect(() => {
if (!debounced) return;
fetch(`https://api.github.com/search/users?q=${debounced}`)
.then((res) => res.json())
.then((data) => setUsers(data.items || []));
}, [debounced]);
return (
<div>
<input value={input} onChange={(e) => setInput(e.target.value)} placeholder="Search GitHub
Users" />
<ul>
{users.map((user) => (
<li key={user.id}>{user.login}</li>
))}
</ul>
</div>
);
