Question 1

What is the difference between "props" and "state" in React?

Accepted Answer

Props and state are both used to manage data, but they serve different purposes. Props, short for properties, are read-only data passed down from a parent component to a child component, acting like instructions or arguments for a function. State, on the other hand, is a component's internal memory used for data that changes over time, such as a counter or a form input. While a component cannot change its own props, it can update its state using the `useState` hook, which triggers React to automatically re-render the UI with the new information.

Question 2

What are React Server Components (RSC) and how do they differ from traditional SSR?

Accepted Answer

React Server Components represent a hybrid architectural shift where some components render exclusively on the server and never send their JavaScript logic to the client's browser. In traditional Server-Side Rendering (SSR), the server sends HTML, but the browser must still download and run the corresponding JavaScript to make the page interactive—a process called hydration. With RSC, heavy libraries or complex logic stay on the server, sending only the resulting UI to the user. This significantly reduces the amount of JavaScript a device needs to download, which is especially beneficial for users on slow mobile connections.

Question 3

What is the "Four-State Model" for managing application data?

Accepted Answer

The Four-State Model is an intentional strategy for organizing data based on its purpose and location. It categorizes state into four distinct buckets: Server state (data from an API), Global UI state (app-wide settings like themes), Form state (temporary data in inputs), and URL state (filters or parameters stored in the web address). By using specific tools for each—such as TanStack Query for server data or Zustand for global UI—developers can prevent performance issues and ensure that data is kept as close as possible to where it is actually used.

Question 4

How does React Native allow developers to build mobile apps?

Accepted Answer

React Native applies the same core philosophy of components, props, and state to mobile development for iOS and Android. Unlike a "web view" that simply displays a website inside an app, React Native renders to actual native UI elements, such as a "UIView" on iOS. This allows developers to use their existing React skills and share a significant portion of business logic between web and mobile platforms while still achieving the performance and "feel" of a truly native application.

Question 5

What is "Feature-Sliced Design" and why is it recommended over older methods?

Accepted Answer

Feature-Sliced Design is an organizational strategy that groups code by its business purpose—such as "Authentication" or "ProductCatalog"—rather than by technical type like "components" or "hooks." This approach, often called "co-location," places the UI, logic, API calls, and tests for a specific feature in one dedicated folder. This reduces cognitive overhead for developers and makes the application more scalable, as teams can work on individual "vertical slices" of the app without interfering with one another.

How React Works and Why Developers Love It

How This Personalized Podcast Was Made

More like this