ReactDOM.hydrate with ClientOnly

[igorroch]

There is a console error when we try to render component with parameter clientOnly: true

react-dom.development.js:894 Warning: Expected server HTML to contain a matching <div> in <div>.

@Html.React("ReactWorld", new { name = "World" }, clientOnly: true)

Minimal repo to reproduce: https://github.com/igorroch/React.NET-issue-521

https://stackoverflow.com/questions/46443652/react-16-warning-expected-server-html-to-contain-a-matching-div-in-body
says that "If your application is not ssr, please use ReactDOM.render to start"

But now RenderJavaScript() uses only ReactDOM.hydrate for all components.

[dustinsoftware]

Thanks for reporting this bug.

…

On Thu, Mar 22, 2018 at 05:18, igorroch ***@***.***> wrote: There is a console error when we try to render component with parameter clientOnly: true react-dom.development.js:894 Warning: Expected server HTML to contain a matching in . @Html.React("ReactWorld", new { name = "World" } ,clientOnly: true ) Minimal repo to reproduce: https://github.com/igorroch/demo https://stackoverflow.com/questions/46443652/react-16-warning-expected-server-html-to-contain-a-matching-div-in-body says that "If your application is not ssr, please use ReactDOM.render to start" — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#521>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5hFrADg0MKBs2ISSOBZE9r3aeWZ318ks5tg5aCgaJpZM4S28dg> .

[suhailnaw]

@igorroch are you working on a fix? If not, I'm looking to make my first open source contribution and can take a stab at it!

[igorroch]

@suhailnaw Not working now. I wish to do it, but do not have free time at all. Feel free to take it

[dustinsoftware]

Hi @suhailnaw 👋 let me know if you'd like some help on this one! If you don't have time either let me know and I'll take care of it.

[suhailnaw]

Hey @dustinsoftware, I do need some help! Is the aim to remove error because now we should be using ReactDOM.hydrate for all cases?

[dustinsoftware]

Per the React docs, hydrate should be called on a component that has been server rendered. When server-render is skipped, calling render is appropriate.

Add ClientOnly as a property to ReactComponent. When ReactEnvironment.CreateComponent is called, ClientOnly needs to be set:

React.NET/src/React.Core/ReactEnvironment.cs

Lines 305 to 309 in 86115d7

	var component = new ReactComponent(this, _config, _reactIdGenerator, componentName, containerId)
	{
	Props = props,
	ServerOnly = serverOnly
	};

When RenderJavaScript is called in ReactComponent, ClientOnly should be checked. If true, ReactDOM.render should be written to the script instead of ReactDOM.hydrate.

React.NET/src/React.Core/ReactComponent.cs

Lines 234 to 241 in 86115d7

	public virtual void RenderJavaScript(TextWriter writer)
	{
	writer.Write("ReactDOM.hydrate(");
	WriteComponentInitialiser(writer);
	writer.Write(", document.getElementById(\"");
	writer.Write(ContainerId);
	writer.Write("\"))");
	}

Let's make sure to add a unit test for this as well. Here's an example one you can duplicate:

React.NET/tests/React.Tests/Core/ReactComponentTest.cs

Lines 197 to 214 in d49bb11

	[Fact]
	public void RenderJavaScriptShouldCallRenderComponent()
	{
	var environment = new Mock<IReactEnvironment>();
	var config = new Mock<IReactSiteConfiguration>();
	var reactIdGenerator = new Mock<IReactIdGenerator>();
	var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
	{
	Props = new { hello = "World" }
	};
	var result = component.RenderJavaScript();
	Assert.Equal(
	@"ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
	result
	);
	}

[suhailnaw]

Hey @dustinsoftware , I just made my first open source PR :D Could you please give me some feedback? I really appreciate all your help and aim to wrap this issue asap!

I had to make the changes on my OSX machine and am working on getting my Windows machine up. I will run the linter and test script once I have my Windows machine up, but wanted to get your feedback on where I was going for this bug fix. Let me know what you think!

[dustinsoftware]

Fixed