Search implementation in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the search input update the displayed results in Remix?

Consider a Remix component that uses a search input to filter a list of items. Which option correctly describes how the search input updates the displayed results?

Remix

export default function Search() {
  const [query, setQuery] = React.useState('');
  const items = ['apple', 'banana', 'cherry', 'date'];
  const filtered = items.filter(item => item.includes(query));

  return (
    <main>
      <input
        aria-label="Search items"
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ul>
        {filtered.map(item => <li key={item}>{item}</li>)}
      </ul>
    </main>
  );
}

A The input's onChange updates state, which triggers a re-render showing filtered items matching the query.

B The input directly filters the items array without using state, so the list updates automatically.

C The input uses a form submit event to filter items, so results update only after submitting.

D The input uses a ref to read the value and manually updates the DOM list without React state.

💡 Hint

Think about how React state controls what is shown on the screen.

In Remix React components, updating state with setState triggers a re-render. The filtered list depends on the query state, so changing the input updates the displayed items immediately.

❓ lifecycle

intermediate

When does Remix loader run during a search?

In Remix, you can use a loader function to fetch search results from the server. When does this loader run in relation to user search input?

Remix

export async function loader({ request }) {
  const url = new URL(request.url);
  const search = url.searchParams.get('q') || '';
  const results = await fetchData(search);
  return json({ results });
}

A The loader runs only once when the app starts and never again during searches.

B The loader runs on every page load and whenever the URL query changes, including search input changes that update the URL.

C The loader runs only when the user submits a form, not on URL changes.

D The loader runs on every keystroke in the search input automatically.

💡 Hint

Remember that Remix loaders run on server requests and URL changes.

Remix loaders run on initial page load and whenever the URL changes. If the search query is in the URL, changing it triggers the loader to fetch new results.

📝 Syntax

advanced

What is the correct way to access search params in a Remix loader?

Which code snippet correctly extracts the 'q' search parameter from the request URL in a Remix loader?

A const q = new URLSearchParams(request).get('q');

B const q = request.searchParams.get('q');

C const url = new URL(request.url); const q = url.searchParams.get('q');

D const q = request.query.q;

💡 Hint

Look at how to create a URL object from the request URL string.

In Remix loaders, the request object has a URL string. You create a URL object from it, then use searchParams.get to read query parameters.

🔧 Debug

advanced

Why does this Remix search loader return empty results?

Given this loader code, why might the search results always be empty?

export async function loader({ request }) {
  const url = new URL(request.url);
  const search = url.searchParams.get('query');
  const results = await fetchData(search);
  return json({ results });
}

A The loader must return a Response object, not json().

B fetchData is asynchronous and must be awaited, but the code does not await it.

C The request object does not have a url property in Remix loaders.

D The URL parameter is named 'q' in the URL, but the code looks for 'query', so it gets null.

💡 Hint

Check if the parameter name matches what the URL uses.

If the URL uses 'q' but the code reads 'query', search will be null, causing fetchData to return empty results.

🧠 Conceptual

expert

How does Remix handle search state between client and server?

In Remix, when implementing search functionality that fetches data server-side, how is the search state synchronized between client input and server loader?

A The client updates the URL query parameter on input change, triggering a server loader fetch with that query, syncing state via the URL.

B The client sends search input directly to the server via WebSocket, bypassing URL and loader.

C The server pushes search results to the client without any client-side input or URL changes.

D The client stores search state only locally and never updates the server or URL.

💡 Hint

Think about how Remix uses URLs to share state between client and server.

Remix uses the URL as the single source of truth for state shared between client and server. Changing the URL query triggers the loader to fetch data, keeping client and server in sync.