TaskList API re-render component

[RafaelGB]

Hi Dataview community,
I am using the dv API with the database folder plugin and we are rendering a tasklist with this method:

DataviewService.getDataviewAPI().taskList(
        taskValue as Grouping<SListItem>,
        false,
        taskRef.current,
        view,
        view.file.path
      );

works well but any change inside view provokes a mini render of the component.

Is there a way to create a custom component that encapsulates those rerenders?

I tried without result something like this:

DataviewService.getDataviewAPI().taskList(
        taskValue as Grouping<SListItem>,
        false,
        taskRef.current,
        new MarkdownRenderChild(taskRef.current)
        view.file.path
      );

Demo of the re render trouble:

Screen.Recording.2022-08-22.at.18.29.54.mov

[blacksmithgu]

Do you have a link to how this code is being called? The taskList function just adds a new child component to view which renders the task on load and removes it on unload; it shouldn't change unless the cell is being re-rendered externally.

[RafaelGB]

thanks for your quick response!

The plugin is called the method here

The problem here I guess is that view is the entire table component. If a component inside view is re-rendered with react it seems that is when that refresh occurs

I just try this way but the re-rendering persist:

const taskComponent = new Component();
DataviewService.getDataviewAPI().taskList(
    taskValue as Grouping<SListItem>,
    false,
    taskRef.current,
    taskComponent,
    view.file.path
);
view.addChild(taskComponent);

[blacksmithgu]

I think this is just being caused by React re-renders and not by the taskList call - your TaskCell is probably being re-rendered on every table update. If you do something silly like a console.log in the useEffect() call, do you get repeated prints on every update?

I'm not sure what you are using for your table, but you can try memoizing the task cell to prevent re-renders.

[RafaelGB]

The combo of use addChild and bound the useEffect do the trick!

useEffect(() => {
    // Check if there are tasks in the cell
    if (taskValue !== "") {
      taskRef.current.innerHTML = "";
      if ((column.columnDef as TableColumn).config.task_hide_completed) {
        taskValue = (taskValue as any).where((t: any) => !t.completed);
      }
      const taskComponent = new MarkdownRenderChild(taskRef.current);
      DataviewService.getDataviewAPI().taskList(
        taskValue as Grouping<SListItem>,
        false,
        taskRef.current,
        taskComponent,
        row.original.__note__.getFile().path
      );
      view.addChild(taskComponent);
    }
  }, []); // <= do not refresh after load (like memoized)

Thanks for your help and your fantastic plugin. I will be happy to contribute with it