Variable or React State?

Question

Still trying to understand React state.

slides won't change so it's not state.

count changes so it's state.

currentSlide changes based on count. Should it be state?

Thank you for any help!

const slides = [
  { background: 'blue', heading: 'Hi' },
  { background: 'pink', heading: 'Hola' }
];

function Home() {
  const [count, setCount] = useState(0);
  let currentSlide = slides[count]; // should currentSlide be state?

  
  useEffect(() => {
    // interval incrementing count every 10 seconds
  });


  return (
    <div bg={currentSlide.background}>
    </div>
  );
}

export default Home;

See the checklist in step 3 in the react docs on Thinking in React. — Brian Thompson
– Brian Thompson, Commented Nov 17, 2021 at 14:42

Secret · Accepted Answer · 2021-11-17 14:38:07Z

3

It's fine to keep it as it is. It is in a way 'derived' state, and you can just keep it as a normal variable.

As an example, imagine you wanted to show count multiple times in a page. This would be fine to do:

function Home() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // increment count 10 seconds
  })

  const count1 = count + 1
  const count2 = count + 2

  return (
    <div>
      <div>{count}</div>
      <div>{count1}</div>
      <div>{count2}</div>
    </div>
  );
}

or, more succintly:

function Home() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // increment count 10 seconds
  })

  return (
    <div>
      <div>{count}</div>
      <div>{count + 1}</div>
      <div>{count + 2}</div>
    </div>
  );
}

answered Nov 17, 2021 at 14:38

Secret

3,3705 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kyun · Accepted Answer · 2021-11-17 14:43:44Z

1

Base on your code, you declared currentSlide as a variable, not a state. So, when currentSlide is updated, re-rendering doesn't occur. If you feel burdened to use currentSlide as a state, you can use useMemo hook instead.

This is an example of using useMemo base on your code.

const slides = [
  { background: 'blue', heading: 'Hi' },
  { background: 'pink', heading: 'Hola' }
];

function Home() {
  const [count, setCount] = useState(0);
  const currentSlide = React.useMemo(()=>{
    return slides[count];
  }, [count]);
  
  useEffect(() => {
    // interval incrementing count every 10 seconds
  });


  return (
    <div bg={currentSlide.background}>
    </div>
  );
}

export default Home;

answered Nov 17, 2021 at 14:43

kyun

10.4k9 gold badges36 silver badges79 bronze badges

1 Comment

Chris K. Over a year ago

Thanks kyun. I'll checkout useMemo if I have to use state.

kadiro · Accepted Answer · 2021-11-17 14:44:52Z

0

i will try to explpain to you the logic behind it in a simplified manner if you are put in a situation where your logic is an "if condition" then you will be using the "STATE" an example to that would be as follows

 if(myState==something){
i will do that
}else{
i will do something else
}

Overall whenever you are using a conditional logic you have to use this type of state

answered Nov 17, 2021 at 14:44

kadiro

1,1461 gold badge13 silver badges17 bronze badges

Collectives™ on Stack Overflow

Variable or React State?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related