Open uvera opened 1 year ago
@uvera can we get a small reproducible repo?
@tomdracz any opinions of this? CC: @ahangarha @Judahmeek
@justin808
Here it is https://github.com/uvera/React-on-rails-turbo-js-bug-reproduction
Please check out https://github.com/uvera/React-on-rails-turbo-js-bug-reproduction/blob/main/app/javascript/packs/application-bundle.js
and when running server http://localhost:3000/cars/new
React component does not get rendered after form submission and turbo rerender.
@uvera can you see if #1614 fixes this issue?
See #1620
So I'm using turbo streams for re-rendering forms when there are errors.
where I replace the form
edit.turbo_stream.erb
where form
_form.html.erb
where controller actions
The issue arises when I submit the form, react_component does not get re-rendered/hydrated even with
The workaround I found is event listening for "turbo:before-stream-render"
turboReloadJs
is just for re-initializing flowbite/tailwindcss this selector[data-signal-react-rerender]
is searching for span tag fromsignal_react_rerender
Another thing
Something I noticed is without debounced and delayed call to
ReactOnRails.reactOnRailsPageLoaded();
console warns withWarning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
This is caused because this event gets called twice and of course, it's happening before stream rendering.
Environment
Expected behavior
ReactOnRails should re-render/hydrate components after turbo-stream form replacement where we have
react_component
helper called within the replaced formActual behavior
Components do not get re-rendered/hydrated after turbo-stream form replacement
Small, reproducible repo
https://github.com/uvera/React-on-rails-turbo-js-bug-reproduction