Quiz 5 Study Guide

Q1. How are Firebase Realtime Database security rules structured?

Security rules are structured as a JSON object that mirrors the database structure. They define ".read" and ".write" permissions at each path in the database tree. Rules cascade downward — a rule at a parent path applies to all children. For example: { "rules": { ".read": true, ".write": false } } allows anyone to read but no one to write.

Q2. How are nested paths specified when using ref() in Firebase?

Nested paths are specified using forward-slash notation as the second argument to ref(). For example, ref(db, "people/sarah/age") accesses the age property inside the sarah object inside people. Each slash navigates one level deeper into the JSON tree.

Q3. How do you access URL parameters (e.g., :id) in a React Router component?

By using the useParams() hook from react-router-dom. It returns an object where each key matches the parameter name defined in the route path. For example, if the route is path="users/:id", then const { id } = useParams() gives you the value from the URL.

Q4. How do you handle errors in a Promise when using fetch() and then()?

By chaining a .catch() method at the end of the Promise chain. The .catch() callback receives an error object if any preceding .then() throws an error or returns a rejected Promise. Example: fetch(url).then(res => res.json()).then(data => ...).catch(err => console.error(err)).

Q5. In React Router, what is the purpose of the useParams() hook when working with URL parameters?

The useParams() hook extracts dynamic URL parameter values from the current route. It returns an object of key/value pairs where keys correspond to the :param placeholders in the route's path. This lets components access and use the URL values to render dynamic content (e.g., fetching a specific user by ID).

Q6. In React Router, which component is typically used at the top level to enable routing?

<BrowserRouter> is used at the top level (usually wrapping <App /> in main.jsx). It provides the routing context that all other React Router components (Routes, Route, Link, etc.) depend on. It uses the browser's History API to keep the URL in sync with the rendered content.

Q7. In the context of client-side routing, what is a URL parameter?

A URL parameter is a variable segment in a URL path, prefixed with a colon in the route definition (e.g., :id in /users/:id). It acts as a placeholder that matches any value in that position of the URL. The actual value from the URL can be accessed programmatically using the useParams() hook.

Q8. What does a Promise represent in the context of an AJAX request?

A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. For an AJAX request, it represents the HTTP response that will arrive in the future. While the request is in progress, the Promise is in a "pending" state; it eventually resolves with the response or rejects with an error.

Q9. What does AJAX stand for?

Asynchronous JavaScript And XML. Despite the name, modern AJAX typically uses JSON instead of XML for data exchange. The term refers to the technique of sending HTTP requests from JavaScript code without requiring a full page reload.

Q10. What does it mean to say that AJAX is asynchronous?

It means the HTTP request is sent without blocking the rest of the code from executing. The browser continues running subsequent JavaScript statements while waiting for the server's response. When the response arrives, a callback function (via .then() or await) handles the data. This prevents the UI from freezing during network requests.

Q11. What does the fetch() function return when called?

It returns a Promise that resolves to a Response object. The Response object contains metadata about the HTTP response (status code, headers) and methods to access the body content (e.g., .json(), .text()). The actual data must be extracted by calling one of these methods, which also returns a Promise.

Q12. What does the path prop in react-router's <Route> component represent?

The path prop defines the URL pattern that the route should match. When the browser's current URL matches this pattern, the route's element component is rendered. Paths can include static segments (/about), dynamic parameters (/users/:id), and wildcards (*).

Q13. What is Firebase primarily used for in client-side applications?

Firebase is primarily used as a web backend solution that provides hosting, real-time databases, user authentication, and file storage without requiring developers to build and maintain their own server. It allows client-side apps to persist data, authenticate users, and store files using simple API calls.

Q14. What is the difference between set() and update() in Firebase?

set() replaces the entire value at a database reference — any existing data at that path is overwritten completely. update() merges the provided fields into the existing data, only modifying the specified properties while leaving other existing properties unchanged. Use update() when you want to change specific fields without affecting the rest.

Q15. What is the difference between the set() and push() methods for the Firebase Realtime Database?

set() writes data to a specific path you define, replacing any existing value. push() auto-generates a unique key and creates a new child entry under the given reference, useful for list-like structures. Use set() when you know the exact key, and push() when adding items to a collection.

Q16. What is the main difference between <Link> and <NavLink>?

Both create client-side navigation links without full page reloads, but <NavLink> automatically applies an "active" CSS class when its to path matches the current URL. This makes it ideal for navigation menus where the current page should be visually highlighted. <Link> provides basic navigation without active styling.

Q17. What is the main difference between Firebase Realtime Database and Firestore?

The Realtime Database stores data as a single large JSON tree, while Firestore organizes data into collections of documents (similar to a document database). Firestore supports more complex queries, better scalability, and offline support. Realtime Database is simpler and streams data changes in real-time. Firestore is the newer, recommended option for most projects.

Q18. What is the main purpose of client-side routing in a React application?

Client-side routing allows a Single-Page Application to display different content based on the URL without reloading the page from the server. It swaps React components in and out based on the URL path, providing the appearance of multiple pages while keeping the smooth, fast user experience of a single-page app.

Q19. What is the primary purpose of AJAX in web development?

AJAX allows web pages to send and receive data from a server asynchronously without requiring a full page reload. This enables dynamic content updates (e.g., loading new data, submitting forms) while the user continues interacting with the page, creating a smoother, more responsive user experience.

Q20. What is the primary purpose of Firebase Realtime Database security rules?

Security rules control who can read and write data at each path in the database. They protect sensitive data from unauthorized access and validate the structure of incoming data. Without proper rules, anyone with the database URL could read or modify all data. Rules can check authentication status, user IDs, and data validity.

Q21. What is the purpose of a polyfill when using the fetch() function?

A polyfill provides an implementation of fetch() for older browsers that don't natively support it. The fetch() API is relatively modern and isn't available in all browsers (especially older versions of Internet Explorer). A polyfill like whatwg-fetch checks if fetch exists and, if not, adds a compatible implementation so the code works across all browsers.

Q22. What is the purpose of the react-router's <Outlet> component in nested routes?

<Outlet /> acts as a placeholder in a parent route's component where the matched child route's content is rendered. It allows parent routes to define shared layout elements (like navigation or headers) that persist while the nested child content changes based on the URL. Without <Outlet />, child routes would have nowhere to render.

Q23. What type of database does Firebase Realtime Database use?

Firebase Realtime Database is a NoSQL cloud database that stores data as a single large JSON object. There are no tables, rows, or columns like in SQL databases. Data is organized as a tree of key-value pairs, where values can be strings, numbers, booleans, objects, or arrays (stored as objects with auto-generated keys).

Q24. When using Firebase's Realtime Database, what does the ref() function return?

The ref() function returns a Reference object that points to a specific location (path) in the database. This reference does not contain the actual data — it's a pointer used with other Firebase functions (set(), push(), onValue()) to read from or write to that database location.

Q25. Which condition will NOT cause a Firebase onValue() listener to trigger?

A change to data at a different path that the listener is not observing will NOT cause it to trigger. The onValue() listener only fires when data at its specific reference path (or any child of that path) changes. It also fires once immediately when first attached to provide the initial value. Client-side state changes unrelated to Firebase do not trigger it either.

Q26. Which Firebase function lets you listen for real-time changes to a database value?

onValue() from firebase/database. It takes a database reference and a callback function that receives a snapshot every time the data at that reference changes. Call snapshot.val() to get the actual data. It returns an unregister function to stop listening.

Q27. Which function should you use to add items to a Firebase list-like structure?

push() should be used to add items to a list-like structure. It automatically generates a unique key for each new entry, preventing conflicts when multiple users add items simultaneously. Example: push(ref(db, "tasks"), { description: "New task" }).

Q28. Which method is used to handle successful completion of a Promise?

The .then() method is used to handle successful completion. It takes a callback function that receives the resolved value as its argument. Multiple .then() calls can be chained together, where each one receives the return value of the previous callback. Example: fetch(url).then(response => response.json()).then(data => console.log(data)).

Q29. Which of the following best describes a Single-Page Application (SPA)?

A SPA is a web application that loads a single HTML page and dynamically updates the content using JavaScript without requiring full page reloads from the server. Navigation between "pages" is handled entirely in the browser by swapping components in and out. The URL changes to reflect the current view, but the page itself never fully reloads.

Q30. Why are Promises useful when chaining operations like fetch() and json()?

Promises allow you to chain multiple asynchronous operations in a readable, sequential order using .then(). Each .then() waits for the previous operation to complete before executing. Without Promises, you'd need deeply nested callbacks ("callback hell"). Promises also provide centralized error handling through a single .catch() at the end of the chain.

Q31. Why does Firebase not directly support arrays in the Realtime Database?

Because arrays with numeric indices cause race conditions when multiple users modify the same list simultaneously. If two users add an item at index 5 at the same time, one write would overwrite the other. Instead, Firebase uses objects with auto-generated unique keys (via push()), ensuring each entry has a distinct identifier that prevents conflicts.

Q32. Why does response.json() return another Promise instead of the actual data?

Because the response body is a data stream that hasn't been fully downloaded yet when the Response object is received. The .json() method asynchronously reads the entire body stream and parses it as JSON, which takes time. It returns a Promise that resolves to the parsed JavaScript object once the full body has been read and parsed.

Q33. Why does the fetch() function return a Promise instead of the actual data?

Because network requests take time and are asynchronous. If fetch() waited for the response before returning, it would block all other JavaScript execution and freeze the UI. Instead, it immediately returns a Promise that resolves when the server responds, allowing the browser to continue processing other code while waiting for the data.