How to deploy with Heroku

[ecalogero]

Hi there,

I tried to deploy this code sample with Heroku and the app crashed with a memory leak:

https://codesandbox.io/s/creating-a-sky-box-and-reflections-in-react-three-fiber-6izyu?from-embed=&file=/src/App.js

(All I did was change the images for the skybox).

Can anybody explain to me why?

Thank you,

Kind regards,

Erica.

[drcmda]

hi erica, you have side effects in your render functions, lots of them, that means every time the components render you are creating buffers and textures without ever disposing of them. what you should strive for is zero side effects, put locals into usestate, memoize calculations with usememo, actual side-effects go into useEffect.

[drcmda]

tried to fix your example: https://codesandbox.io/s/cubecamera-rendertarget-03b7e?file=/src/App.js this should not have any leaks

btw, isn't this the same as a simple envmap? https://codesandbox.io/s/env-cubetexture-1nxgq seems to me that would run faster and it's easier to handle. instead of a global envmap you can also have them individually on the models. unless you plan to have other objects mirrored in it, in that case never mind.

[ecalogero]

Thank you so much for this! These are lots of new topics for me to explore. I've been away but I'm now exploring the code sample that you posted and am having trouble following it and the advice more generally. I see from the imports that you are using useLayoutEffect and useState from react and useResource from r3f. When I try to run this on localhost, I get a runtime error such that the scene doesn't render and the following errors: [image: r3f_skybox_errors.png] I do need to research the subject of side effects and memoization as I'm a total noob, if you know of any good docs/ tutorials on the subjects, I would be grateful for any recommendations. Thanks in advance, Kind regards, Erica.

…

On Sun, Sep 27, 2020 at 8:52 AM Paul Henschel ***@***.***> wrote: tried to fix your example: https://codesandbox.io/s/cubecamera-rendertarget-03b7e?file=/src/App.js this should not have any leaks — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#700 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACSHATEJ4MTOLOWLLZ3FQVDSH3VLPANCNFSM4R3BZ3UA> .

-- Erica Calogero www,ericacalogero.weebly.com

[ecalogero]

Hi there, Please ignore the last message. It works fine. I just didn't clone the whole repo, so was having problems with the wrong versions of different npm packages... Any other noobs who want to learn more about the subjects mentioned in the thread, this is what I found: React Hooks Overview https://reactjs.org/docs/hooks-overview.html UseState https://reactjs.org/docs/hooks-state.html https://medium.com/the-non-traditional-developer/creating-a-stateful-ref-object-in-react-fcd56d9dea58 UseEffect https://reactjs.org/docs/hooks-effect.html UseLayoutEffect https://reactjs.org/docs/hooks-reference.html#uselayouteffect https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node UseResource https://inspiring-wiles-b4ffe0.netlify.app/4-hooks Best, Erica.

…

On Mon, Oct 26, 2020 at 7:18 PM Erica Calogero ***@***.***> wrote: Thank you so much for this! These are lots of new topics for me to explore. I've been away but I'm now exploring the code sample that you posted and am having trouble following it and the advice more generally. I see from the imports that you are using useLayoutEffect and useState from react and useResource from r3f. When I try to run this on localhost, I get a runtime error such that the scene doesn't render and the following errors: [image: r3f_skybox_errors.png] I do need to research the subject of side effects and memoization as I'm a total noob, if you know of any good docs/ tutorials on the subjects, I would be grateful for any recommendations. Thanks in advance, Kind regards, Erica. On Sun, Sep 27, 2020 at 8:52 AM Paul Henschel ***@***.***> wrote: > tried to fix your example: > https://codesandbox.io/s/cubecamera-rendertarget-03b7e?file=/src/App.js > this should not have any leaks > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#700 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ACSHATEJ4MTOLOWLLZ3FQVDSH3VLPANCNFSM4R3BZ3UA> > . > -- Erica Calogero www,ericacalogero.weebly.com

-- Erica Calogero www,ericacalogero.weebly.com