Global State

Preview — 3 of 10 questions

What does createSlice generate?

javascript

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0, status: "idle" },
  reducers: {
    increment: (state) => { state.value += 1; }, // Immer — looks like mutation!
    decrement: (state) => { state.value -= 1; },
    incrementByAmount: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Astate.value += 1 directly mutates state — this is a bug

BYou must manually call Object.freeze() on state in RTK reducers

CcreateSlice is a UI component factory, not a state management tool

DcreateSlice uses Immer internally — "mutations" inside reducers are intercepted and produce a new immutable state; it also auto-generates action creators and action type strings

How does RTK Query differ from manual data fetching?

javascript

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const usersApi = createApi({
  reducerPath: "usersApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (builder) => ({
    getUsers:   builder.query({ query: () => "/users" }),
    getUserById: builder.query({ query: (id) => `/users/${id}` }),
    updateUser:  builder.mutation({ query: (user) => ({ url: `/users/${user.id}`, method: "PUT", body: user }) }),
  }),
});

export const { useGetUsersQuery, useGetUserByIdQuery, useUpdateUserMutation } = usersApi;

ARTK Query is just fetch with extra steps

BRTK Query only works with REST APIs, not GraphQL

CRTK Query requires manual cache invalidation on every mutation

DRTK Query auto-generates hooks, handles caching/deduplication/invalidation, normalizes data fetching patterns, and integrates with Redux DevTools — no manual loading/error state management

What does createSelector optimize?

javascript

import { createSelector } from "reselect";

const selectTodos        = state => state.todos;
const selectFilter       = state => state.filter;

const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    console.log("Computing filtered todos"); // expensive computation
    return todos.filter(t => t.status === filter);
  }
);

AcreateSelector runs the computation on every store change

BcreateSelector is only compatible with Redux, not Zustand

CcreateSelector memoizes: the computation only runs when todos or filter change; if neither changed (same references), returns the cached result

DcreateSelector prevents the component from re-rendering

Answer all 10 questions (7 more), see explanations for every answer, and track your score.