Problem Statement

In React framework, in general there is a big issue, where if we want to pass any instance down the tree. We end up unnecessarily passing it in every component, which might lead to performance degradation.

In Task Board, one such instance is the TaskBoard of type Plugin. This is being passed from the main.ts file, deep inside, almost in each and every component. Specially, because it's being passed inside the TaskItem component in TaskItem.tsx file. I think this is causing the performance degradation and lags in this plugin, when a huge amount of tasks is being rendered or when user is dealing with a huge number of tasks and since all these taskItem cards are rendered.

This TaskBoard instance contains tasksCache and other objects, which is making it heavy. And in a lot of components, such as TaskItem, there is no need to pass the whole TaskBoard instance, as we are not using the cache directly inside the component. Hence, in such components we can only pass the data which is necessary.

Problem Statement

In React framework, to fix this problem there is a concept known as useContext.
Refer the following React docs to learn more about it : https://react.dev/reference/react/useContext.

We can make use of this, to make the TaskBoard instance itself as a pluginContext and then it can be used only wherever required by calling a function, which will pass the plugin instance through the context.

And, now, we can pass only the setting from plugin.settings.data in the taskItem, so that we are only passing the data which is been actually used and avoid passing the complete plugin instance.

Another famous plugin of Obsidian, called Kanban plugin has made use of this same technique to improve the performance of their plugin. Refer the following code : https://github.com/mgmeyers/obsidian-kanban/blob/8501981a1afacb4c8fc03ec60604aa5eedfbd857/src/components/Kanban.tsx#L215

Implications

Few things we need to note after implementing this optimization. Since the tasks cache is stored inside the plugin instance. Hence, we need to make sure whenever we will be updating the cache and when we will be using the cache through this pluginContext, it should be the latest tasks cache.