357 improve folderview performance

[gpuente]

Description:

• Refactor FileItem and FolderItem to improve render performance

NOTE: Virtualization will be added in a different PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
connect	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 14, 2024 0:56am

[gpuente]

Do you know what is taking the longest now?

I noticed that the console.log call for the PressResponder warning hits performance a bit. A PressResponder was rendered without a pressable child. Either call the usePress hook, or wrap your DOM node with <Pressable> component.

Also decodeId and encodeId look like they could be optimized a bit. The string is iterated once for each character we want to replace, maybe we could replace everything in a single call.

export const encodeID = (id: string) => {
    let encodedID = id;

    replacements.forEach(({ encode }) => {
        const [regexp, replaceWith] = encode;
        encodedID = encodedID.replace(regexp, replaceWith);
    });

    return encodedID;
};

FolderView still takes most of the render time, but this is going to be fixed with the implementation of virtualization (working on it rn)

I'll address the encodeID, decodeID and PressResponder performance optimizations in a different PR 👍🏻

[github-actions[bot]]

:tada: This PR is included in version 1.0.0-dev.7 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This PR is included in version 1.0.0-next.2 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: