Component PropsProblem Statement'Define an interface GreetProps with name: string. Write a functional component Greet(props: GreetProps).'Approach 1. Interfaces are the standard for typing props. Solution`interface GreetProps { name: string;
React.FC TypeProblem Statement'Rewrite the Greet component using the React.FC (or React.FunctionComponent) type.'Approach 1. React.FC is a generic type provided by @types/react. Solution`import React from 'react'; interface GreetProps { name: string;
useState InferenceProblem Statement'Declare a state for a counter starting at 0. What is its inferred type?'Approach 1. TS infers number from the initial value. Solutionconst [count, setCount] = useState(0); // number
useState GenericProblem Statement'Declare a state for a User object or null.'Approach 1. Use the generic parameter `useState<Type | null>(null)`. Solution`interface User { name: string
Click Event TypeProblem Statement'Type an onClick handler for a button.'Approach 1. Use `React.MouseEvent<HTMLButtonElement>`. Solution`const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { console.log("Clicked!");
Change Event TypeProblem Statement'Type an onChange handler for a text input.'Approach 1. Use `React.ChangeEvent<HTMLInputElement>`. Solution`const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { console.log(e.target.value);
useRef DOM ElementProblem Statement'Create a ref for an input element and initialize it correctly.'Approach 1. Use `useRef<HTMLInputElement>(null)`. Solutionconst inputRef = useRef<HTMLInputElement>(null);
useRef Mutable ValueProblem Statement'Create a ref that holds a number (not a DOM element).'Approach 1. Pass the type but no null if initial value is provided. Solutionconst timerId = useRef<number>(0);
Context TypingProblem Statement'Create a ThemeContext that holds "light" | "dark" and initialize it.'Approach 1. Define the type of the context value. Solutiontype Theme = "light" | "dark"; const ThemeContext = React.createContext<Theme>("light");
useReducer TypingProblem Statement'Define types for Action (discriminated union) and State for a simple counter reducer.'Approach 1. Discriminated union for actions. Solution`type State = { count: number
React.ReactNodeProblem Statement'Define props for a Card component that accepts children.'Approach 1. Use `React.ReactNode` for children. Solution`interface CardProps { children: React.ReactNode;
CSS Properties TypeProblem Statement'Define a prop for a style object.'Approach 1. Use `React.CSSProperties`. Solution`interface BoxProps { style: React.CSSProperties;
Form Submit EventProblem Statement'Type the e.preventDefault() event in a form onSubmit handler.'Approach 1. Use `React.FormEvent<HTMLFormElement>`. Solution`const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault();
useEffect CleanupProblem Statement'What is the expected return type of the useEffect callback?'Approach 1. It returns `void` or a cleanup function `() => void`. Solution`useEffect(() => { const s = subscribe(); return () => s.unsubscribe(); // Cleanup function
Custom Hook TypingProblem Statement'Type a useFetch hook that returns { data: T | null, loading: booleanApproach 1. Use generics in the custom hook. Solution`function useFetch<T>(url: string) { const [data, setData] = useState<T | null>(null); const [loading, setLoading] = useState(true); return { data, loading
React.memo with TSProblem Statement'How do you wrap a typed component with React.memo?'Approach 1. It usually preserves types automatically. Solution`const MyComp = React.memo(({ name
Generic ComponentProblem Statement'Create a generic List component that takes an items array and a renderItem function.'Approach 1. Functional components can be generic. Solution`interface ListProps<T> { items: T[]; renderItem: (item: T) => React.ReactNode;
Portals with TSProblem Statement'What is the return type of ReactDOM.createPortal?'Approach 1. It returns a `React.ReactPortal`. Solution`import { createPortal
forwardRef TypingProblem Statement'Type a component using forwardRef that exposes an HTMLButtonElement.'Approach 1. `forwardRef<RefType, PropsType>`. Note the order! Solution`const MyButton = React.forwardRef<HTMLButtonElement, { label: string
Native vs Synthetic EventsProblem Statement'How to type a standard window "resize" event listener inside useEffect?'Approach 1. Use the global `Event` type. Solution`useEffect(() => { const handleResize = (e: Event) => {