Unhandled Runtime-Errors: Random-Function in REACT

[SukranSari]

Hey everybody,

I have created a project in React that creates a list of Projects.
Actually I want to generate a Random-Project from my Projectslist and get the Unhandled Runtime-Errors:

In my first step I have generate a Random-Project in the file ProjectsList:

import ProjectCard from "@/components/ProjectCard";
import Link from "next/link";
import styled from "styled-components";
import RandomProject from "../RandomProject";

export default function ProjectsList({ projects, searchInput }) {
  if (!projects || projects.length === 0) {
    return <h1>No projects found. Please create new ones.</h1>;
  }

const randomProject = projects[Math.floor(Math.random() * projectsArray.length)];

  const searchedProjects = projects.filter((project) => {
    if (searchInput === "") {
      return project;
    } else {
      return (
        project.title.toLowerCase().startsWith(searchInput) ||
        project.title.toLowerCase().includes(searchInput)
      );
    }
  });

  if (searchedProjects.length === 0) {
    return <StyledNoSearchResults>No projects found</StyledNoSearchResults>;
  }

  return (
<>
<ProjectCard project={randomProject} />
    <div>
      <StyledUl>
        {searchedProjects.toReversed().map((project) => (
          <li key={project.id}>
            <ProjectCard project={project} />
          </li>
        ))}
      </StyledUl>
    </div>
</>
  );
}

My second step was to create a component "RandomProject" that was rendered in the file index.js (Homepage).

import ProjectCard from "../ProjectCard";

export default function RandomProject({ projects }) {
  if (!projects) {
    return null;
  }

  function getRandomProject(projects) {
    return projects[Math.floor(Math.random() * projects.length)];
  }

  const randomProject = getRandomProject(projects);

  return (
    <div>
      <ProjectCard project={randomProject} />
    </div>
  );
}

import Form from "@/components/Form";
import Header from "@/components/Header";
import useLocalStorageState from "use-local-storage-state";
import FilterList from "@/components/FilterList";
import SearchBar from "@/components/SearchBar";
import { useState } from "react";
import RandomProject from "@/components/RandomProject";

export default function HomePage({ projects, setNewProjects }) {
  const [searchInput, setSearchInput] = useState("");

  function handleSearch(event) {
    const lowerCasedInput = event.target.value.toLowerCase();
    setSearchInput(lowerCasedInput);
  }

  const [formMaterials, setFormMaterials] = useLocalStorageState("materials", {
    defaultValue: [""],
  });

  const [formSteps, setFormSteps] = useLocalStorageState("steps", {
    defaultValue: [{ id: "1", description: "" }],
  });
  return (
    <>
      <Header />
      <Form
        setNewProjects={setNewProjects}
        projects={projects}
        formMaterials={formMaterials}
        setFormMaterials={setFormMaterials}
        formSteps={formSteps}
        setFormSteps={setFormSteps}
      />
      <RandomProject projects={projects} />
      <SearchBar onSearch={handleSearch} />
      <FilterList projects={projects} searchInput={searchInput} />
    </>
  );
}

[NikRoe]

Hi there,

can you provide us with a PR with the current state of your application where this error occurs?

Thanks in advance 🙏

[SukranSari]

Hi,

here ist the PullRequest:
PR-Random

[EsraaQandel]

Since your component uses Math.random() to select a random project during rendering, the project chosen by the server may differ from the one chosen by the client. This difference results in a content mismatch, triggering the hydration error.

It's important to understand that in Next.js, your code is rendered twice—once on the server and once on the client. During server-side rendering (SSR), the server generates the initial HTML, which is then sent to the client. Once the HTML is loaded in the browser, React re-renders the component on the client side for hydration. If Math.random() is used directly in the render process, it will run during both the server and client renders, likely generating different values and leading to a mismatch in the content.

To resolve this issue, you need to ensure that the content remains consistent between the server and client renders. One way to achieve this is by performing the randomization only on the client side, using useEffect, which does not run during server-side rendering.

For example, you can modify your code to defer the random selection until after the component has mounted on the client:

import { useEffect, useState } from "react";
import ProjectCard from "../ProjectCard";

export default function RandomProject({ projects }) {
  const [randomProject, setRandomProject] = useState(null);

  useEffect(() => {
    if (projects && projects.length > 0) {
      setRandomProject(projects[Math.floor(Math.random() * projects.length)]);
    }
  }, [projects]);

  if (!randomProject) {
    return null;
  }

  return (
    <div>
      <ProjectCard project={randomProject} />
    </div>
  );
}

In your original code, Math.random() is called directly within the component's render process, causing the random selection to happen twice: once on the server and again on the client. As a result, the client may pick a different project than the one chosen by the server, leading to a mismatch in the rendered content.

By wrapping Math.random() inside useEffect, you ensure that it only runs on the client side, after the initial render. This approach eliminates the inconsistency and prevents the hydration error, as the random project is selected only once, ensuring consistency between the server-rendered HTML and the client-side content.

@SukranSari Please update your code as per our zoom call and let me know if any issues are encountered! :)

[SukranSari]

Hi @EsraaQandel , I have another problem in my code. Can you come to the room 5?

[SukranSari]

Hi @EsraaQandel the problem is solved :)