1/n Use zustand to reduce re-renders
This commit is contained in:
parent
3dc2e3eace
commit
e6ef3ff23f
14 changed files with 210 additions and 87 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue