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,5 +1,5 @@
import { useContext, useState } from "react";
import { AppContext, APIContext } from "../../context";
import { APIContext } from "../../context";
import { ErrorWithLabel } from "../../rqbit-web";
import { ErrorComponent } from "../ErrorComponent";
import { Spinner } from "../Spinner";
@ -7,6 +7,7 @@ import { Modal } from "./Modal";
import { ModalBody } from "./ModalBody";
import { ModalFooter } from "./ModalFooter";
import { Button } from "../buttons/Button";
import { useTorrentStore } from "../../stores/torrentStore";
export const DeleteTorrentModal: React.FC<{
id: number;
@ -20,8 +21,8 @@ export const DeleteTorrentModal: React.FC<{
const [error, setError] = useState<ErrorWithLabel | null>(null);
const [deleting, setDeleting] = useState(false);
const ctx = useContext(AppContext);
const API = useContext(APIContext);
const refreshTorrents = useTorrentStore((state) => state.refreshTorrents);
const close = () => {
setDeleteFiles(false);
@ -37,7 +38,7 @@ export const DeleteTorrentModal: React.FC<{
call(id)
.then(() => {
ctx.refreshTorrents();
refreshTorrents();
close();
})
.catch((e) => {

View file

@ -1,6 +1,6 @@
import { useCallback, useContext, useEffect, useState } from "react";
import { AddTorrentResponse, AddTorrentOptions } from "../../api-types";
import { AppContext, APIContext } from "../../context";
import { APIContext } from "../../context";
import { ErrorComponent } from "../ErrorComponent";
import { formatBytes } from "../../helper/formatBytes";
import { ErrorWithLabel } from "../../rqbit-web";
@ -14,6 +14,7 @@ import { Fieldset } from "../forms/Fieldset";
import { FormInput } from "../forms/FormInput";
import { Form } from "../forms/Form";
import { FileListInput } from "../FileListInput";
import { useTorrentStore } from "../../stores/torrentStore";
export const FileSelectionModal = (props: {
onHide: () => void;
@ -35,7 +36,7 @@ export const FileSelectionModal = (props: {
const [uploadError, setUploadError] = useState<ErrorWithLabel | null>(null);
const [unpopularTorrent, setUnpopularTorrent] = useState(false);
const [outputFolder, setOutputFolder] = useState<string>("");
const ctx = useContext(AppContext);
const refreshTorrents = useTorrentStore((state) => state.refreshTorrents);
const API = useContext(APIContext);
useEffect(() => {
@ -77,7 +78,7 @@ export const FileSelectionModal = (props: {
.then(
() => {
onHide();
ctx.refreshTorrents();
refreshTorrents();
},
(e) => {
setUploadError({ text: "Error starting torrent", details: e });