While working on a project, I decided to incorporate a wysiwyg style editor. I came across a video on YouTube showcasing a Reddit clone that had the feature integrated using Editor JS. As I delved into the code, I noticed an interesting use of useEffect triggering another useEffect, which left me a bit puzzled.
useEffect(() => {
if (typeof window !== 'undefined') {
setIsMounted(true)
}
}, [])
useEffect(() => {
const init = async () => {
await initializeEditor()
setTimeout(() => {
_titleRef?.current?.focus()
}, 0)
}
if (isMounted) {
init()
return () => {
ref.current?.destroy()
ref.current = undefined
}
}
}, [isMounted, initializeEditor])
The creator used the first useEffect to trigger the second one. This raised some doubts in my mind - why didn't they initialize the editor in the initial effect itself? So, I tried replicating the same approach:
useEffect(() => {
const init = async () => {
await initializeEditor()
}
if (typeof window !== 'undefined') {
init()
}
}, [])
However, this led to the editor being initialized twice for me. The issue was resolved by disabling strict mode. This made me wonder why the editor wasn't initialized twice in the original example?