Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Typescript · Question Set
React + Typescript interview questions for placements and exams.
Questions
12
Included in this set
Subject
Typescript
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Typescript.
Use React.forwardRef to pass a ref down. Add generics so the ref points to the correct element or component instance.
import React, { forwardRef } from 'react';
type InputProps = React.ComponentProps<'input'>;
const TextInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
return <input ref={ref} {...props} />;
});For complete preparation, combine this set with full subject-wise practice for Typescript. You can also explore other subjects and sets from the links below.
Use a union with a shared type field, like { type: 'add'; payload: number }. It enables safe, exhaustive switch statements.
type Action =
| { type: 'inc' }
| { type: 'add'; payload: number };
function reducer(state: number, action: Action){
switch(action.type){
case 'inc': return state + 1;
case 'add': return state + action.payload;
}
}Type refs as the exact element or null. This works well with strict mode and avoids unsafe any.
import { useRef, useEffect } from 'react';
function Panel(){
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => { ref.current?.focus?.(); }, []);
return <div ref={ref} tabIndex={-1} />;
}A polymorphic component’s ref type depends on the chosen element. Use a generic tied to the as prop so ref stays accurate.
type AsProp<C extends React.ElementType> = { as?: C } & Omit<React.ComponentProps<C>, 'as'>;
// Then forwardRef with a generic C to map the ref correctly.Data loaders for Suspense-style flows return Promise<T>. React waits for the promise to settle before rendering the data path.
async function loadUser(id: number): Promise<User> {
const r = await fetch(`/api/users/${id}`);
return r.json();
}Type the context value, provide a safe default, and create a useAuth hook that throws if used outside the provider. Consumers get strong types for user and setUser.
import React, { createContext, useContext, useState } from 'react';
type User = { id: string; name: string };
type AuthValue = { user: User | null; setUser: React.Dispatch<React.SetStateAction<User | null>> };
const AuthCtx = createContext<AuthValue | undefined>(undefined);
export function AuthProvider({ children }: { children: React.ReactNode }){
const [user, setUser] = useState<User | null>(null);
return <AuthCtx.Provider value={{ user, setUser }}>{children}</AuthCtx.Provider>;
}
export function useAuth(){
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('useAuth must be used within AuthProvider');
return ctx;
}
// Consumer
function Header(){
const { user, setUser } = useAuth();
return <div>{user ? `Hi ${user.name}` : 'Guest'}</div>;
}Use a discriminated union of actions and a switch on action.type. Add a never check in the default branch so new actions must be handled or the build fails.
type State = { count: number };
type Action =
| { type: 'inc' }
| { type: 'dec' }
| { type: 'add'; payload: number };
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'inc': return { count: state.count + 1 };
case 'dec': return { count: state.count - 1 };
case 'add': return { count: state.count + action.payload };
default: {
const _exhaustive: never = action; // compile-time guard
return state;
}
}
}useTransition returns a boolean pending flag and a startTransition callback. useDeferredValue returns a lagging version of a value. Type them from React so you get correct call signatures and states.
import React, { useDeferredValue, useMemo, useTransition } from 'react';
function Search({ items }: { items: string[] }){
const [isPending, startTransition] = useTransition();
const [query, setQuery] = React.useState('');
const deferredQuery = useDeferredValue(query);
const filtered = useMemo(() => {
const q = deferredQuery.toLowerCase();
return items.filter(x => x.toLowerCase().includes(q));
}, [items, deferredQuery]);
return (
<div>
<input value={query} onChange={e => {
const v = e.currentTarget.value;
startTransition(() => setQuery(v));
}} />
{isPending && <span>Updating…</span>}
<ul>{filtered.map(x => <li key={x}>{x}</li>)}</ul>
</div>
);
}Use PropsWithChildren<P> when your component accepts children. It safely adds an optional children: ReactNode to your props without you writing it by hand.
import { PropsWithChildren } from 'react';
type CardProps = PropsWithChildren<{ title: string }>
function Card({ title, children }: CardProps) {
return (<section><h2>{title}</h2>{children}</section>);
}children can be strings, numbers, elements, fragments, portals, or arrays. ReactNode covers these cases. JSX.Element is too narrow.
import { ReactNode } from 'react';
type BoxProps = { children?: ReactNode };
function Box({ children }: BoxProps){ return <div>{children}</div>; }React wraps DOM events. For text inputs, the handler receives ChangeEvent<HTMLInputElement>. You can read e.currentTarget.value safely.
import { ChangeEvent } from 'react';
function NameField(){
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
console.log(e.currentTarget.value);
};
return <input onChange={onChange} />;
}Make Button default to 'button', but allow swapping the tag via as. Tie props and ref to the chosen element using a generic C extends ElementType. This keeps both props and ref fully typed for links, divs, or custom components.
import React, { forwardRef } from 'react';
type PolymorphicProps<C extends React.ElementType, P> = {
as?: C;
} & Omit<React.ComponentPropsWithoutRef<C>, 'as'> & P;
type ButtonOwnProps = { variant?: 'solid' | 'ghost' };
type ButtonComponent = <C extends React.ElementType = 'button'>(
props: PolymorphicProps<C, ButtonOwnProps> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
) => React.ReactElement | null;
export const Button: ButtonComponent = forwardRef(
<C extends React.ElementType = 'button'>({ as, variant = 'solid', ...rest }: PolymorphicProps<C, ButtonOwnProps>, ref: React.ComponentPropsWithRef<C>['ref']) => {
const Comp = as ?? 'button';
return <Comp ref={ref} data-variant={variant} {...rest} />;
}
) as any;
// Usage: <Button>OK</Button> | <Button as="a" href="#">Link</Button>