react Questions

1 months ago

Next.js: what is the best way to fetch data on the server?

I’m working on a Next.js project and I want to understand the most correct way to fetch API data in a page using server-side rendering.

I tried using useEffect, but the initial content is not available immediately and I’d like to avoid SEO issues and hydration mismatches.

What is the recommended approach between Server Components, getServerSideProps, and client-side fetching?

Are there cases where one is better than the others?

Matteo Marconi

Answers

Upvotes

Views

1 months ago

How to write effective unit tests for React components with Vitest?

I'm setting up testing for my React app using Vitest + React Testing Library. I'm not sure about best practices:

Should I test implementation details (internal state) or only behavior?
How do I test components that make API calls?
When should I use vi.mock()?

Looking for practical examples, not just "test behavior not implementation."

testing

react

2 months ago

React: custom hook for data fetching — is this pattern correct?

I wrote a custom hook for fetching data. Is this the right way to do it, or am I missing something?

function useFetch(url: string) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

Should I use AbortController? What about race conditions?

react

typescript

David Kim

2 months ago

React: useEffect dependency array — when does it cause infinite loops?

My component keeps re-rendering infinitely. Here's a simplified version:

function MyComponent({ onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchSomething().then(setData);
    onUpdate(data);
  }, [onUpdate, data]);
}

I think the issue is with onUpdate but I'm not sure. What are the rules for the dependency array?

react

javascript

Tom Kowalski

asked 2 months ago

2 months ago

React Server Components — how to handle client-side state within them?

I'm migrating my Next.js app to use React Server Components (RSC). I love the performance benefits, but I'm confused about the boundary.

Specifically: I have a ProductList RSC that fetches products, but each product card needs a client-side "Add to Cart" button with optimistic UI. What's the recommended pattern?

react

nextjs

Sofia Greco

asked 2 months ago

3 months ago