Paxium

.Net application development specialists

asp.net, c#, vb.net, html, javascript, jquery, html, xhtml, css, oop, design patterns, sql server, mvc and much more

contact: admin@paxium.co.uk

Paxium is the company owned by myself, Dave Amour and used for providing IT contract development services including

Application development - Desktop, Web, Services - with Classic ASP, Asp.net WebForms, Asp.net MVC, Asp.net Core
Html, Css, JavaScript, jQuery, React, C#, SQL Server, Ado.net, Entity Framework, NHibernate, TDD, WebApi, GIT, IIS
Database schema design, implementation & ETL activities
Website design and hosting including email hosting
Training - typically one to one sessions
Reverse Engineering and documentation of undocumented systems
Code Reviews
Performance Tuning
Located in Cannock, Staffordshire

When to use useEffect vs a Click Handler

User Question: So given useEffect is for side effects, if I want to load some json from an endpoint when a button is clicked, can I do that in the click handler or should I use a useEffect?

Answer:

Good question 👍

It depends on when you want the fetch to happen:

🔹 Using useEffect

- Use this when you want data to load automatically as a side-effect of rendering (e.g., when the component first mounts or when some dependency changes).
- Example: load movies from an API when the component is displayed.

import { useEffect, useState } from "react";

function Movies() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetch("/api/movies")
      .then(res => res.json())
      .then(data => setMovies(data));
  }, []); // empty array → run once on mount

  return <div>{movies.length} movies loaded</div>;
}

Here useEffect is right, because fetching is a side-effect of rendering.

🔹 Using a Click Handler

- Use this when you only want the fetch to happen in direct response to user action (like clicking a button).
- You don’t need useEffect at all — just call fetch in the handler.

import { useState } from "react";

function MovieLoader() {
  const [movies, setMovies] = useState([]);

  const handleClick = () => {
    fetch("/api/movies")
      .then(res => res.json())
      .then(data => setMovies(data));
  };

  return (
    <>
      <button onClick={handleClick}>Load Movies</button>
      <div>{movies.length} movies loaded</div>
    </>
  );
}

Here, useEffect would be wrong, because the fetch isn’t tied to rendering — it’s tied to the button click.

✅ Rule of thumb:

If the fetch happens because the component exists or state/props changed → useEffect.
If the fetch happens because the user explicitly did something → event handler.

Explaining `res` and `data`

User Question: Explain res and data here

const handleClick = () => {
  fetch("/api/movies")
    .then(res => res.json())
    .then(data => setMovies(data));
};

Answer:

fetch("/api/movies") → makes an HTTP request and returns a Promise that resolves to a Response object.
res → the HTTP Response object. It has:
- res.ok → true if status 200–299
- res.status → numeric status code
- res.headers → response headers
- methods like .json(), .text(), .blob()
res.json() → reads the body and parses it as JSON. Returns a Promise resolving to JS data.
data → the parsed JSON you actually use (e.g., an array of movies).

✅ So in plain English:

res = the HTTP response wrapper (status, headers, body, etc.).
res.json() = extracts and parses the body as JSON.
data = the actual parsed JSON you care about.

Example Article Snippet Using then()

Click the button to fetch /api/movies. Here, res is the HTTP Response (status, headers, body reader), and data is the parsed JSON from res.json().