Set 5 is about the typing questions you hit every day in React: props, children, hooks, events and refs. Each answer explains why the type looks the way it does, so next time you can type a new component without guessing.
How to practise: read each question and tap the option you think is correct. You will see right away whether you got it, along with a short explanation, and your score is tracked at the bottom of the screen. This set has 15 questions.
Topics covered in this set
- Typing props and children with ReactNode
- useState, useRef and useReducer generics
- Event types for inputs and forms
- forwardRef and refs as props in React 19
- Generic components and native element props
- Discriminated-union props and typed context
TypeScript MCQs with answers and explanations
Q1. Which type is the usual choice for a children prop that can hold text, elements, arrays or nothing?
a) string
b) React.ReactElement
c) JSX.Element
d) React.ReactNode
Q2. Why is a generic needed here?
const [user, setUser] = useState<User | null>(null);
a) useState cannot infer types at all
b) It makes the state immutable
c) It is required by the React compiler
d) Without it, the state would be inferred as null and setUser(someUser) would be an error
Q3. What is the type of inputRef.current?
const inputRef = useRef<HTMLInputElement>(null);
// <input ref={inputRef} />
a) undefined
b) HTMLInputElement | null
c) HTMLInputElement
d) any
Q4. Which type fits the parameter of this handler?
<input onChange={(e) => setName(e.target.value)} />
// handler written separately: function handle(e: ???)
a) InputEvent
b) React.MouseEvent<HTMLInputElement>
c) React.ChangeEvent<HTMLInputElement>
d) Event
Q5. How do you type a form submit handler that calls e.preventDefault()?
a) (e: any) => void
b) (e: SubmitEvent) => void
c) (e: React.ChangeEvent<HTMLFormElement>) => void
d) (e: React.FormEvent<HTMLFormElement>) => void
Q6. Why does action.payload have the right type inside each case?
type Action =
| { type: "add"; payload: Todo }
| { type: "remove"; payload: number };
function reducer(state: Todo[], action: Action) {
switch (action.type) { ... }
}
a) Because Todo is an interface
b) useReducer adds the types automatically
c) payload is any
d) The type field is a literal discriminant, so each case narrows action to one member of the union
Q7. In forwardRef<A, B>((props, ref) => ...), what are A and B?
a) A is the return type, B is the state type
b) A is the ref (element) type, B is the props type
c) A is the props type, B is the ref type
d) Both are props types
Q8. In React 19, how can a function component receive a ref without forwardRef?
a) By using a class component
b) By using useImperativeHandle only
c) By reading ref as a normal prop, typed for example with React.ComponentProps<"button"> or Ref<HTMLButtonElement>
d) It cannot
Q9. Why is the comma needed in this .tsx file?
const Select = <T,>(props: SelectProps<T>) => { ... };
a) Without it, <T> could be parsed as a JSX tag in a .tsx file
b) It makes T optional
c) It is a syntax error
d) It sets a default type
Q10. How do you make a Button component accept every native button attribute plus a custom variant prop?
a) type Props = { variant: string } & any
b) type Props = React.ComponentPropsWithoutRef<"button"> & { variant: "primary" | "ghost" }
c) interface Props extends Element {}
d) type Props = HTMLButtonElement & { variant: string }
Q11. What does this props type enforce?
type Props =
| { as: "link"; href: string }
| { as: "button"; onClick: () => void };
a) href is required when as is "link", and onClick is required when as is "button"
b) Neither prop is checked
c) as can be any string
d) Both href and onClick are always required
Q12. Why do many teams avoid React.FC for typing components?
a) It makes generic components awkward and adds little over typing props directly; since React 18 types it no longer adds children implicitly
b) It does not compile
c) It is only for class components
d) It is slower at runtime
Q13. What is a common pattern for typing a context that has no sensible default value?
a) createContext<AuthCtx | null>(null) plus a custom hook that throws if the value is null
b) createContext() with no type
c) createContext<any>({})
d) Use a global variable instead
Q14. A custom hook returns [value, setValue]. Why add as const to the return?
a) So the return type is a tuple [string, (v: string) => void] instead of an array of a union type
b) It is required by the rules of hooks
c) To make the hook run faster
d) To freeze the array at runtime
Q15. How do you type a mutable ref that stores a timer ID rather than a DOM node?
a) useState<number>()
b) useRef<ReturnType<typeof setTimeout> | null>(null)
c) useRef<HTMLDivElement>(null)
d) useRef(any)
Quick revision notes
- Use ReactNode for children. Type props directly on the function parameter.
- Pass a generic to useState when the initial value is null or an empty array.
- DOM refs start as null. Event types take the element type, like ChangeEvent<HTMLInputElement>.
- The order is forwardRef<RefType, Props>. In React 19, ref can be a normal prop.
- Use ComponentPropsWithoutRef for native props and discriminated unions for variant props.
Frequently asked questions
Should I use interface or type for React props?
Both work. You need a type alias for union props. Interfaces give a bit clearer errors when you extend them. Just pick one style for the whole codebase.
Where do React types come from?
From the @types/react and @types/react-dom packages. Keep their major version the same as your React version.
How do I type props that pass through to a child component?
Use React.ComponentProps<typeof Child> to reuse the child's props type, so you don't copy it by hand.
Comments
Post a Comment