React Frontend Interview Questions for Java Full Stack with React

function cartReducer(state, action) { switch (action.type) { case 'add': return { count: state.count + 1 }; case 'remove': return { count: Math.max(0, state.count - 1) }; case 'reset': return { count: 0 }; default: throw new Error('Unknown action ' + action.type); } } function Cart() { const [state, dispatch] = useReducer(cartReducer, { count: 0 }); return ( <div> <span>Items: {state.count}</span> <button onClick={() => dispatch({ type: 'add' })}>+</button> <button onClick={() => dispatch({ type: 'remove' })}>-</button> </div> ); }

function ProductList() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); fetch('/api/products', { signal: controller.signal }) .then(res => { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); }) .then(data => setProducts(data.content)) .catch(err => { if (err.name !== 'AbortError') setError(err.message); }) .finally(() => setLoading(false)); return () => controller.abort(); }, []); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error}</p>; return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>; }

export function useFetch(url) { const [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(() => { let ignore = false; setState(s => ({ ...s, loading: true })); fetch(url) .then(r => r.ok ? r.json() : Promise.reject(new Error(r.statusText))) .then(data => { if (!ignore) setState({ data, loading: false, error: null }); }) .catch(error => { if (!ignore) setState({ data: null, loading: false, error }); }); return () => { ignore = true; }; }, [url]); return state; } // Usage: const { data, loading, error } = useFetch(`/api/orders/${id}`);

function LoginForm({ onLogin }) { const [form, setForm] = useState({ email: '', password: '' }); const [errors, setErrors] = useState({}); const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value }); const handleSubmit = e => { e.preventDefault(); const errs = {}; if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Enter a valid email'; if (form.password.length < 8) errs.password = 'Minimum 8 characters'; setErrors(errs); if (Object.keys(errs).length === 0) onLogin(form); }; return ( <form onSubmit={handleSubmit}> <input name="email" value={form.email} onChange={handleChange} /> {errors.email && <span>{errors.email}</span>} <input name="password" type="password" value={form.password} onChange={handleChange} /> {errors.password && <span>{errors.password}</span>} <button type="submit">Login</button> </form> ); }

function ProtectedRoute({ roles }) { const { user } = useAuth(); const location = useLocation(); if (!user) { return <Navigate to="/login" replace state={{ from: location }} />; } if (roles && !roles.includes(user.role)) { return <Navigate to="/unauthorized" replace />; } return <Outlet />; } // Routes <Route element={<ProtectedRoute roles={['ADMIN']} />}> <Route path="/admin" element={<AdminDashboard />} /> </Route> // The backend must still enforce authorization on every API.

const api = axios.create({ baseURL: import.meta.env.VITE_API_URL }); api.interceptors.request.use(config => { const token = getAccessToken(); if (token) config.headers.Authorization = `Bearer ${token}`; return config; }); api.interceptors.response.use( res => res, async error => { const original = error.config; if (error.response?.status === 401 && !original._retry) { original._retry = true; await refreshToken(); // calls /api/auth/refresh with cookie return api(original); } return Promise.reject(error); });