How can I optimize my page performance,

[hoelshen]

As you can see in the screenshot, I depend on a variable, and when this variable changes, I need to modify the list. But I observed that there are two renderings, and it will be printed once before and after the data change. When the amount of data is very large, this will cause flickering.

The following is the reproduced project address and code

codesandbox地址：https://codesandbox.io/p/sandbox/fragrant-firefly-wv25hl?file=%2Fsrc%2Fchildren.js

App.js

import "./styles.css";
import { useState, useEffect, memo } from "react";
import Children from "./children";
import store from "./store";

function App() {
  const [count, setCount] = useState(0);
  const add = () => {
    console.log("Add");
    store.Store.updateSortableList();
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Children count={count} />
      <div onClick={add}>add</div>
    </div>
  );
}
export default App;

children.js

import "./styles.css";
import { observer } from "mobx-react-lite";
import store from "./store";
import { useEffect, useState } from "react";

function Children(props) {
  const { updatedCount } = store.Store;
  const [count, setCount] = useState([]);
  useEffect(() => {
    const newCount = [...count];
    newCount.push(updatedCount);
    setCount([...newCount]);
  }, [updatedCount]);
  console.warn("countrender", count, props.count, updatedCount);
  return (
    <>
      {props.count}
      {count.length > 0 &&
        count.map((id) => {
          return <div className="App">child{id}</div>;
        })}
      {updatedCount}
    </>
  );
}
export default observer(Children);

store.js

import { makeAutoObservable } from "mobx";
import { createContext } from "react";

export class Store {
  updatedCount = 0;
  constructor() {
    makeAutoObservable(this);
  }

  updateSortableList = () => {
    this.updatedCount += 1;
  };
}
export function createStores() {
  return {
    Store: new Store()
  };
}

const stores = createStores();
export const AppContext = createContext(stores);
export default stores;

When I expect updatedCount, only render once

[mweststrate]

You're doing a lot of things here that are not normal React usage, like updating the list during render, or producing new state in a useEffect. Make sure to read the React docs carefully and understand the abstractions it offers. In this case make sure that the all the state is updated / computed during the event handler, instead of during and after render.

…

On Sat, 8 Apr 2023, 06:56 Hoel Shen, ***@***.***> wrote: As you can see in the screenshot, I depend on a variable, and when this variable changes, I need to modify the list. But I observed that there are two renderings, and it will be printed once before and after the data change. When the amount of data is very large, this will cause flickering. [image: image] <https://user-images.githubusercontent.com/23608829/230703811-f2341e76-ed8f-49e6-b706-66c2ea7974e2.png> The following is the reproduced project address and code codesandbox地址： https://codesandbox.io/p/sandbox/fragrant-firefly-wv25hl?file=%2Fsrc%2Fchildren.js <http://url> `import "./styles.css"; import { useState, useEffect, memo } from "react"; import Children from "./children"; import store from "./store"; function App() { const [count, setCount] = useState(0); const add = () => { console.log("Add"); store.Store.updateSortableList(); }; return ( Hello CodeSandbox add ); } export default App; import "./styles.css"; import { observer } from "mobx-react-lite"; import store from "./store"; import { useEffect, useState } from "react"; function Children(props) { const { updatedCount } = store.Store; const [count, setCount] = useState([]); useEffect(() => { const newCount = [...count]; newCount.push(updatedCount); setCount([...newCount]); }, [updatedCount]); console.warn("countrender", count, props.count, updatedCount); return ( <> {props.count} {count.length > 0 && count.map((id) => { return child{id} ; })} {updatedCount} </> ); } export default observer(Children); import { makeAutoObservable } from "mobx"; import { createContext } from "react"; export class Store { updatedCount = 0; constructor() { makeAutoObservable(this); } updateSortableList = () => { this.updatedCount += 1; }; } export function createStores() { return { Store: new Store() }; } const stores = createStores(); export const AppContext = createContext(stores); export default stores; ` — Reply to this email directly, view it on GitHub <#3681>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFYF7DMNDMLHH3F6YTXADVXJANCNFSM6AAAAAAWXGP7E4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[hoelshen]

What you said is reasonable, but my business scenario needs to be handled this way