1/n Use zustand to reduce re-renders

This commit is contained in:
Igor Katson 2023-12-17 19:27:22 +00:00
parent 3dc2e3eace
commit e6ef3ff23f
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
14 changed files with 210 additions and 87 deletions

View file

@ -1,24 +1,23 @@
import { useContext } from "react";
import { TorrentId, ErrorDetails as ApiErrorDetails } from "../api-types";
import { AppContext } from "../context";
import { TorrentsList } from "./TorrentsList";
import { ErrorComponent } from "./ErrorComponent";
import { useTorrentStore } from "../stores/torrentStore";
import { useErrorStore } from "../stores/errorStore";
export const RootContent = (props: {}) => {
let closeableError = useErrorStore((state) => state.closeableError);
let setCloseableError = useErrorStore((state) => state.setCloseableError);
let otherError = useErrorStore((state) => state.otherError);
let torrents = useTorrentStore((state) => state.torrents);
let torrentsLoading = useTorrentStore((state) => state.torrentsLoading);
export const RootContent = (props: {
closeableError: ApiErrorDetails | null;
otherError: ApiErrorDetails | null;
torrents: Array<TorrentId> | null;
torrentsLoading: boolean;
}) => {
let ctx = useContext(AppContext);
return (
<div className="container mx-auto">
<ErrorComponent
error={props.closeableError}
remove={() => ctx.setCloseableError(null)}
error={closeableError}
remove={() => setCloseableError(null)}
/>
<ErrorComponent error={props.otherError} />
<TorrentsList torrents={props.torrents} loading={props.torrentsLoading} />
<ErrorComponent error={otherError} />
<TorrentsList torrents={torrents} loading={torrentsLoading} />
</div>
);
};