Open iLiftALot opened 2 months ago
Hey @iLiftALot, thanks for the contribution. I'm a little bit confused though. In between the last public release (v1.13.0) and the current master
, I've actually rewritten the UI rendering completely. This may go some way to explaining the aesthetic difference and performance change you observed.
The point though, is that I thought I did fix this issue during that rewrite. Did you observe the error on a build from master before your fix? Or have you only observed it when using the public release?
For completeness, in the previous releases, I was fetching the component ref from a Svelte context when rendering Markdown (https://github.com/jamiebrynes7/obsidian-todoist-plugin/blob/1.13.0/plugin/src/components/MarkdownRenderer.svelte#L13), but the context was never initialised properly leading to the error log you saw.
Hey @iLiftALot, thanks for the contribution. I'm a little bit confused though. In between the last public release (v1.13.0) and the current
master
, I've actually rewritten the UI rendering completely. This may go some way to explaining the aesthetic difference and performance change you observed.The point though, is that I thought I did fix this issue during that rewrite. Did you observe the error on a build from master before your fix? Or have you only observed it when using the public release?
For completeness, in the previous releases, I was fetching the component ref from a Svelte context when rendering Markdown (https://github.com/jamiebrynes7/obsidian-todoist-plugin/blob/1.13.0/plugin/src/components/MarkdownRenderer.svelte#L13), but the context was never initialised properly leading to the error log you saw.
No problem @jamiebrynes7
I noticed the error in the developer console while using both the latest version of the public release (v1.13.0) as well as the latest master
release.
Notice that a Component
instance is created if it doesn't already exist. The renderChild
context is then attached to the Component
instance, which is passed within MarkdownRenderer.renderMarkdown
, ensuring proper lifecycle management.
Additionally, I just submitted another update which adds a cleanup for any potential resources that are left over.
- RIP
These additions solved the error on my end.
By no means am I an expert; I guarantee you are far ahead of me in terms of knowledge regarding the use of TypeScript/JavaScript, especially React. The purpose of this pull request is more to bring it to your attention, get your mind going on why this resolved the error, and potentially lead to an improved version.
I've studied Python for ~7-8 months before switching over to JavaScript/TypeScript over the past 2 months, so when I noticed the error, I looked at it as a great learning opportunity. Programming has evolved into an unhealthy obsession rather than a hobby 😂.
I also love the plugin and use it every day within my daily and weekly notes. Up until now I've never submitted a pull request.
I'm currently working on implementing additional features such as task deletion, pulling/displaying comments, etc. There are ways to implement these things according to the Todoist documentation, I just need to find my way around your plugin code 😅
My schedule is pretty open until the Fall, so let me know if you have more questions about this - I'd be glad to help in any way possible.
Memory Leak Error Message
This is a solution for the following error indicating potential memory leaks:
I definitely notice a performance increase after the adjustment. This was happening because the component life cycle was not being properly managed. It was solved by creating a
componentRef
.NOTE: It seems like this slightly changes the formatting of the final render, but nothing drastic. Personally, I enjoy the change, it appears more aesthetic in my opinion, so I opted to not make any changes.
Explanation of Changes Made
A
componentRef
is created to manage the lifecycle of theComponent
. The componentRef is initialized if it'snull
, ensuring a single instance is used.The useEffect hook manages the rendering and cleanup of the component. On cleanup
(return () => { ... })
, therenderChild
is removed from thecomponent
, and thecomponent
is set tonull
to avoid memory leaks.The
RenderChildContext
is used correctly to get therenderChild
context. TherenderChild
is added to theComponent
which is then passed to theMarkdownRenderer.renderMarkdown
method.