Loading... Login Loading... Register

React with TypeScript Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

In TypeScript, what is a Discriminated Union and how is it useful in React?

type LoadingState = {
    state: 'loading';
};

type SuccessState = {
    state: 'success';
    response: string;
};

type ErrorState = {
    state: 'error';
    error: Error;
};

interface StateContainer {
    stateObject: LoadingState | SuccessState | ErrorState;
}

const Component: React.FC<StateContainer> = ({ stateObject }) => {
    switch (stateObject.state) {
        case 'loading':
            return <div>Loading...</div>;
        case 'success':
            return <div>{stateObject.response}</div>;
        case 'error':
            return <div>Error: {stateObject.error.message}</div>;
        default:
            return null;
    }
};

Select your answer

An alias for a generic type.

A type that allows multiple inheritance in TypeScript.

A type that combines multiple types with shared identifiers to allow narrowed type checking based on specific values.

A type that ignores type safety for the sake of flexibility.

Question 2/15

How can you define and use a custom hook with TypeScript in a React component?

function useCustomHook() {
    const [value, setValue] = useState<string>("");
    return { value, setValue };
}

const MyComponent: React.FC = () => {
    const { value, setValue } = useCustomHook();
    return <input value={value} onChange={e => setValue(e.target.value)} />;
};

Select your answer

Declare it as a class method for managing state.

Use `React.useHook` to define the hook and call it in the component.

Create it as a standalone JavaScript function without types.

Define the hook as a regular function using TypeScript types and use it inside the component.

Question 3/15

How do you define a prop that accepts children in TypeScript with React?

interface MyComponentProps {
    children?: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
    return <div>{children}</div>;
};

Select your answer

By defining the prop type as `JSX.Element`.

By defining the prop type as `Element`.

By defining the prop type as `ReactElement`.

By defining the prop type as `React.ReactNode`.

Question 4/15

What is the purpose of the `React.FC` type in a TypeScript React component?

const MyComponent: React.FC = () => {
    return <div>Hello, World!</div>;
};

Select your answer

To type the props of a functional component.

To declare state in a functional component.

To handle side effects in a component.

To define a class component.

Question 5/15

How do you enforce that a certain number of times a component rerenders when a particular prop changes in TypeScript?

class MyComponent extends React.Component<{ inputValue: number }> {
    componentDidUpdate(prevProps: { inputValue: number }) {
        if (prevProps.inputValue !== this.props.inputValue) {
            console.log('Rerendered!');
        }
    }
}

Select your answer

By writing a custom `shouldComponentUpdate` method that increments each time.

By editing React's internal render processes (not recommended).

You don't directly enforce rerender times; React manages rendering based on prop or state changes.

Using state variables to count rerenders manually within the component.

Question 6/15

Which TypeScript utility can you use to define only some of the properties of an interface as required?

interface Person {
    name: string;
    age: number;
    address?: string;
}

const person: Required<Pick<Person, 'name' | 'age'>> = { name: 'Alice', age: 30 };

Select your answer

`Pick` and `Required` combined.

`Optional` and `Strict`.

`Partial` and `Omit` combined.

`Readonly` and `Mutable`.

Question 7/15

When using a `useReducer` hook in TypeScript, what type parameters should be provided?

type State = {count: number};
type Action = {type: 'increment'} | {type: 'decrement'};

const reducer = (state: State, action: Action): State => {
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            return state;
    }
};

Select your answer

Component props and reducer return type.

Only the state type, as action can be inferred.

Only the action type, as state is self-inferable.

The state and action types for the reducer function.

Question 8/15

In a TypeScript React component, how can you specify that a prop is optional?

interface MyComponentProps {
    name?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
    return <div>{name}</div>;
};

Select your answer

By using `undefined` in the prop type.

By using `?` after the prop name.

By using an `Optional` type alias.

By initializing the prop with `null`.

Question 9/15

How can you share state between two React components without passing props explicitly?

const MyContext = React.createContext<{value: string, setValue: React.Dispatch<React.SetStateAction<string>>} | undefined>(undefined);

const MyProvider: React.FC = ({ children }) => {
    const [value, setValue] = useState("");
    return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
};

const ComponentA: React.FC = () => {
    const context = React.useContext(MyContext);
    return context ? <button onClick={() => context.setValue('Hello')}>Change</button> : null;
};

const ComponentB: React.FC = () => {
    const context = React.useContext(MyContext);
    return context ? <div>{context.value}</div> : null;
};

Select your answer

Utilizing local storage for state persistence.

Developing a custom hook that returns props.

Using React's Context API to manage shared state.

Creating a global object to store state.

Question 10/15

How can you extend interfaces in TypeScript when creating a React component?

interface BaseProps {
    id: string;
}

interface AdvancedProps extends BaseProps {
    date: Date;
}

const Component: React.FC<AdvancedProps> = ({ id, date }) => (
    <div>{id}: {date.toISOString()}</div>
);

Select your answer

By creating a utility type.

By merging objects in the component.

By using `implements` keyword.

By using the `extends` keyword.

Question 11/15

How do you type a component that takes a prop function with a return type of `Promise` using TypeScript with React?

interface AsyncComponentProps {
    fetchData: () => Promise<void>;
}

const AsyncComponent: React.FC<AsyncComponentProps> = ({ fetchData }) => {
    useEffect(() => {
        fetchData();
    }, [fetchData]);
    return <div>Data has been fetched.</div>;
};

Select your answer

Using `async` in the function signature inside the component.

Annotating the component as `React.AsyncComponent`.

Defining a prop with a function type that returns `Promise`.

Declaring the function inside `useEffect`.

Question 12/15

Which hook is used to set up initial state in a TypeScript functional component?

const [count, setCount] = useState<number>(0);

Select your answer

useState

useReducer

useContext

useEffect

Question 13/15

How do you define default props in a React component using TypeScript?

interface MyComponentProps {
    name?: string;
}

const MyComponent = ({ name = "Guest" }: MyComponentProps) => {
    return <div>Hello, {name}</div>;
};

Select your answer

Using default parameter syntax in the props destructuring.

Directly in the JSX return statement.

Using `MyComponent.defaultProps`.

Using `static defaultProps` in a class component.

Question 14/15

How does TypeScript handle missing props when destructuring in a function component?

interface MyComponentProps {
    name: string;
    age?: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age = 0 }) => (
    <div>{name}, {age}</div>
);

Select your answer

By setting all destructured values to `null`.

By throwing a compile-time error.

By setting default values during destructuring or marking props as optional.

By ignoring missing values without warning.

Question 15/15

How can you indicate that a functional component should only render after certain props are confirmed to be non-null and non-undefined?

const MyComponent: React.FC<{ title?: string }> = ({ title }) => {
    if (!title) {
        return null;
    }
    return <div>{title}</div>;
};

Select your answer

Through custom exception handling in JSX.

By checking the props directly and conditionally rendering a component.

By enforcing non-null types at the TypeScript configuration level.

By declaring prop types as `nonNullable` in TypeScript.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

In TypeScript, what is a Discriminated Union and how is it useful in React?

type LoadingState = {
    state: 'loading';
};

type SuccessState = {
    state: 'success';
    response: string;
};

type ErrorState = {
    state: 'error';
    error: Error;
};

interface StateContainer {
    stateObject: LoadingState | SuccessState | ErrorState;
}

const Component: React.FC<StateContainer> = ({ stateObject }) => {
    switch (stateObject.state) {
        case 'loading':
            return <div>Loading...</div>;
        case 'success':
            return <div>{stateObject.response}</div>;
        case 'error':
            return <div>Error: {stateObject.error.message}</div>;
        default:
            return null;
    }
};

Available answers

An alias for a generic type.

A type that allows multiple inheritance in TypeScript.

A type that combines multiple types with shared identifiers to allow narrowed type checking based on specific values.

A type that ignores type safety for the sake of flexibility.

Discriminated Unions in TypeScript are a form of union types that allow complex object typing based on a shared, common property (the discriminant) that acts as an identifier—very useful in component prop interfaces for handling multiple types with known distinctions.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you define and use a custom hook with TypeScript in a React component?

function useCustomHook() {
    const [value, setValue] = useState<string>("");
    return { value, setValue };
}

const MyComponent: React.FC = () => {
    const { value, setValue } = useCustomHook();
    return <input value={value} onChange={e => setValue(e.target.value)} />;
};

Available answers

Declare it as a class method for managing state.

Use `React.useHook` to define the hook and call it in the component.

Create it as a standalone JavaScript function without types.

Define the hook as a regular function using TypeScript types and use it inside the component.

A custom hook in TypeScript is defined as a regular function that may use other hooks internally, and you specify the types as needed.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you define a prop that accepts children in TypeScript with React?

interface MyComponentProps {
    children?: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
    return <div>{children}</div>;
};

Available answers

By defining the prop type as `JSX.Element`.

By defining the prop type as `Element`.

By defining the prop type as `ReactElement`.

By defining the prop type as `React.ReactNode`.

In React with TypeScript, the

React.ReactNode

type is used to type the

children

prop, as it represents anything that can be rendered in a React component.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the `React.FC` type in a TypeScript React component?

const MyComponent: React.FC = () => {
    return <div>Hello, World!</div>;
};

Available answers

To type the props of a functional component.

To declare state in a functional component.

To handle side effects in a component.

To define a class component.

React.FC

is a type alias provided by React for defining function components with props in TypeScript.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you enforce that a certain number of times a component rerenders when a particular prop changes in TypeScript?

class MyComponent extends React.Component<{ inputValue: number }> {
    componentDidUpdate(prevProps: { inputValue: number }) {
        if (prevProps.inputValue !== this.props.inputValue) {
            console.log('Rerendered!');
        }
    }
}

Available answers

By writing a custom `shouldComponentUpdate` method that increments each time.

By editing React's internal render processes (not recommended).

You don't directly enforce rerender times; React manages rendering based on prop or state changes.

Using state variables to count rerenders manually within the component.

React handles rerendering automatically based on changes in state or props. While you can observe when it happens, directly controlling the number of rerenders is not a typical pattern in React.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which TypeScript utility can you use to define only some of the properties of an interface as required?

interface Person {
    name: string;
    age: number;
    address?: string;
}

const person: Required<Pick<Person, 'name' | 'age'>> = { name: 'Alice', age: 30 };

Available answers

`Pick` and `Required` combined.

`Optional` and `Strict`.

`Partial` and `Omit` combined.

`Readonly` and `Mutable`.

The

Pick

utility allows you to select a subset of properties, and the

Required

utility enforces the selected properties to be required.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

When using a `useReducer` hook in TypeScript, what type parameters should be provided?

type State = {count: number};
type Action = {type: 'increment'} | {type: 'decrement'};

const reducer = (state: State, action: Action): State => {
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            return state;
    }
};

Available answers

Component props and reducer return type.

Only the state type, as action can be inferred.

Only the action type, as state is self-inferable.

The state and action types for the reducer function.

In TypeScript,

useReducer

should be provided with both state and action types to ensure type-safety within the reducer logic.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

In a TypeScript React component, how can you specify that a prop is optional?

interface MyComponentProps {
    name?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
    return <div>{name}</div>;
};

Available answers

By using `undefined` in the prop type.

By using `?` after the prop name.

By using an `Optional` type alias.

By initializing the prop with `null`.

In TypeScript, you can make a prop optional by adding

after the prop name in the interface.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you share state between two React components without passing props explicitly?

const MyContext = React.createContext<{value: string, setValue: React.Dispatch<React.SetStateAction<string>>} | undefined>(undefined);

const MyProvider: React.FC = ({ children }) => {
    const [value, setValue] = useState("");
    return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
};

const ComponentA: React.FC = () => {
    const context = React.useContext(MyContext);
    return context ? <button onClick={() => context.setValue('Hello')}>Change</button> : null;
};

const ComponentB: React.FC = () => {
    const context = React.useContext(MyContext);
    return context ? <div>{context.value}</div> : null;
};

Available answers

Utilizing local storage for state persistence.

Developing a custom hook that returns props.

Using React's Context API to manage shared state.

Creating a global object to store state.

React's Context API allows components to share data without passing props explicitly through the component tree.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you extend interfaces in TypeScript when creating a React component?

interface BaseProps {
    id: string;
}

interface AdvancedProps extends BaseProps {
    date: Date;
}

const Component: React.FC<AdvancedProps> = ({ id, date }) => (
    <div>{id}: {date.toISOString()}</div>
);

Available answers

By creating a utility type.

By merging objects in the component.

By using `implements` keyword.

By using the `extends` keyword.

In TypeScript, interfaces can be extended using the

extends

keyword, which allows one interface to inherit and augment another.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you type a component that takes a prop function with a return type of `Promise<void>` using TypeScript with React?

interface AsyncComponentProps {
    fetchData: () => Promise<void>;
}

const AsyncComponent: React.FC<AsyncComponentProps> = ({ fetchData }) => {
    useEffect(() => {
        fetchData();
    }, [fetchData]);
    return <div>Data has been fetched.</div>;
};

Available answers

Using `async` in the function signature inside the component.

Annotating the component as `React.AsyncComponent`.

Defining a prop with a function type that returns `Promise<void>`.

Declaring the function inside `useEffect`.

In this context, the prop is typed using a specific function signature

() => Promise<void>

to indicate it returns a promise resolving void.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which hook is used to set up initial state in a TypeScript functional component?

const [count, setCount] = useState<number>(0);

Available answers

useState

useReducer

useContext

useEffect

The

useState

hook is used to set up local state in a functional component. You can specify the type using generics, such as

useState<number>

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you define default props in a React component using TypeScript?

interface MyComponentProps {
    name?: string;
}

const MyComponent = ({ name = "Guest" }: MyComponentProps) => {
    return <div>Hello, {name}</div>;
};

Available answers

Using default parameter syntax in the props destructuring.

Directly in the JSX return statement.

Using `MyComponent.defaultProps`.

Using `static defaultProps` in a class component.

In TypeScript, you can set default values for props by using default parameter syntax during destructuring of the props argument.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does TypeScript handle missing props when destructuring in a function component?

interface MyComponentProps {
    name: string;
    age?: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age = 0 }) => (
    <div>{name}, {age}</div>
);

Available answers

By setting all destructured values to `null`.

By throwing a compile-time error.

By setting default values during destructuring or marking props as optional.

By ignoring missing values without warning.

TypeScript will require a default value in the destructuring if a prop marked as optional is missing, avoiding runtime errors by setting a default value.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you indicate that a functional component should only render after certain props are confirmed to be non-null and non-undefined?

const MyComponent: React.FC<{ title?: string }> = ({ title }) => {
    if (!title) {
        return null;
    }
    return <div>{title}</div>;
};

Available answers

Through custom exception handling in JSX.

By checking the props directly and conditionally rendering a component.

By enforcing non-null types at the TypeScript configuration level.

By declaring prop types as `nonNullable` in TypeScript.

You should perform condition checks in the component render logic to determine whether to return content or

null