# Hydration Error when passing bound data to custom component

**URL:** <https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658>\
**Category:** Bugs\
**Tags:** react, nextjs\
**Created:** [May 22, 2024, 3:24pm UTC](https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658 "2024-05-22T15:24:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jean](https://avatars.discourse-cdn.com/v4/letter/j/fbc32d/32.png) [@jean](https://forum.builder.io/u/jean)\
**Post date:** [May 22, 2024, 3:24pm UTC](https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658/1 "2024-05-22T15:24:56Z")

</div>

Hello, I’m experiencing some hydration issues when passing bound data to a custom component. Despite trying numerous solutions, I find myself quite lost on how to resolve this problem. Am I making a mistake, or has anyone else encountered a similar issue and found a solution? Any guidance would be greatly appreciated. You can check my repo, which is a basic NextJS project to reproduce the exact issue.

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/1b791aabeaea4ba2a6d99a03e38862b6)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
9eacceea83e34c62b1ceadf2a0411f09

**Detailed steps to reproduce the bug**  
See loom below

**Screenshots or video link**  
[  
Builder.io - NextJS - Hydration Error - Watch Video  
 ](https://www.loom.com/share/83c37783099c4f1596134fa769a0d7d8)[![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/87b62c70fbeaa8a5f44d8bc466a33fef8710b404.gif)](https://www.loom.com/share/83c37783099c4f1596134fa769a0d7d8)

**Code stack you are integrating Builder with**  
NextJS 14.2.3

**Reproducible code example**  
[https://github.com/Skry/builder-io-nextjs-hydration-error](https://github.com/Skry/builder-io-nextjs-hydration-error)

---

<div class="post-metadata">

**Author:** ![alexander](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexander/32/4948_2.png) [@alexander](https://forum.builder.io/u/alexander)\
**Post date:** [July 2, 2024, 6:01pm UTC](https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658/2 "2024-07-02T18:01:42Z")

</div>

Hi Jean,

Thanks for including all that info. I have cloned your repository on my side and I was able to reproduce the issue. It seems like a bug, so we are discussing this with our internal team to find out a possible workaround. I will keep you updated on the progress of this issue.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 8, 2024, 11:39am UTC](https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658/3 "2024-07-08T11:39:54Z")

</div>

Hello @jean,

We were able to reproduce the issue on our end, and it seems the hydration error is caused because you’re passing the builder content object. We are not sure why you are passing the content object; however, if you need to access the builder content data, you don’t need to pass it along with the builder component. Instead, you can use it from the builder context object in the editor. Here is an example:

```auto
context.builderContent.data.example

```

Additionally, we tested the scenario when passing an object that is used for binding in the editor. We did not encounter the same error, but you might need to use the `useEffect` hook for the parent component. Here is a modified code example:

```auto
import React, { useEffect, useState } from 'react';
import HydrationTestChild from './HydrationTestChild';

type Props = {
  text: string;
};

const HydrationTestParent = (props: Props) => {
  const [text, setText] = useState(props.text);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setText(props.text); // Ensure client-side rehydration consistency
    }
  }, [props.text]);

  return (
    <div className="p-20 text-4xl w-full bg-green-400">
      Parent : {text}
      <HydrationTestChild text={text} />
    </div>
  );
};

export default HydrationTestParent;

```

Here is an example of fetching and rendering the builder content:

```auto
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

interface PageProps {
  params: {
    page: string[];
  };
}
const myData = {
  content: {
    data: {
      example: "your text here a"
    }
  }
};
export default async function Page(props: PageProps) {
  const builderModelName = "page";

  const content = await builder
    // Get the page content from Builder with the specified options
    .get(builderModelName, {
      enrich: true,
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent data={{ myData}} content={content} model={builderModelName} />
    </>
  );
}

```

For visual guidance, you can refer to the following loom [Hydration error - Builder data | Visual Editor | Builder.io - 8 July 2024 | Loom](https://www.loom.com/share/7129a99836a6481babc62e1d93d7daa7?sid=5acc35b3-df08-47ee-9acd-85d6dbef92c4)

Hope this help!

Thanks,

---

<div class="post-metadata">

**Author:** ![brdev](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@brdev](https://forum.builder.io/u/brdev)\
**Post date:** [November 18, 2024, 2:32am UTC](https://forum.builder.io/t/hydration-error-when-passing-bound-data-to-custom-component/5658/4 "2024-11-18T02:32:49Z")

</div>

I’ve duplicated this example block with hardcoded “myData” as in the example and pass that into my component and it still throws a hydration error. The prop value will be an empty string, then the value of “your text here a.”

This only works with Builder components, but if I try using a custom component with say a, “title” prop and bind the data, I get the hydration issue.

This is forcing me to have to hardcode all my product values or else I get a flash of my default string or a blank space before the data loads in.