React 避免重新渲染 useState

Question

I have a component which uses react-native-scrollable-tabview . I'm having a problem though.

The component has 2 props: page and initialPage .

When rendering the component for the first time, I should set initialPage , otherwise it doesn't work.

However when rendering the component again, if I change this initialPage it goes the new page (tab) but it doesn't render it. BUT, if I set the page then it works.

So the idea is:

First render? Set page to undefined and initialPage to N. Subsequent renders? Set page to N and initialPage to undefined.

I tried using a flag state variable like this:

const [firstRender, setFirstRender] = useState(true);

let page = n;
let initialPage = n;

if(first){
   page = undefined;
   setFirstRender(false);
}else{
  initialPage = undefined;
}

Thing is, the setFirstRender triggers a re render so it doesn't work. However when I go to another screen (using react navigation) and I come back then it works fine.

Is there any way to update this firstRender without it triggering a re render?

Answer 1

Not sure if this is what you're looking for, but maybe something with useEffect could help?

useEffect(() => {
  setFirstRender(false);
}, []);

The array at the end is a dependency and tells the function to only run once, you could also add a value in there that runs only when that value changes as well.

Answer 2

It appears you aren't checking the value of your state anywhere.

eg this conditional:

if(first){
   page = undefined;
   setFirstRender(false);
}else{
  initialPage = undefined;
}

should be changed to rely on the value of state, which you declare as: (const [firstRender, setFirstRender] = useState(true);)

so

if(firstRender){
   page = undefined;
   setFirstRender(false);
}else{
  initialPage = undefined;
}

Additionally, you will probably need to move this conditional into a useEffect where it will update only after the first initial page render.

useEffect(() => {
if (firstRender) {
setFirstRender(false) ...etc