Instance variable reset everytime component re-render in ReactJs

Question

I created one functional component and declared some variables in it.

const Foo = (props) => {
  let instanceVariable = null;

  const selectValue = (value) => {
    instanceVariable = value;
  }

  const proccessVariable = () => {
   // Use instanceVariable and do some task
  }

  return(
    <SelectionOption onChange={selectValue} />
  );
}

I observed that whenever parent component of Foo is re-rendered or sometime Foo itself re-renders instanceVariable set back to null. Instead of this I want to save selectedValue init and proccess it later on proccessVariable() method.

If I set instanceVariable as state it will work and there is no need of state to just hold the selected value.

I know useEffect(()=>{}, []) only run one time but how can I declare instanceVariable there and use it in other functions.

Can you please let me know what I'm doing wrong.

Use a ref there.

devserkan
– devserkan

2020-05-18 04:55:46 +00:00
Commented May 18, 2020 at 4:55 — devserkan
– devserkan, Commented May 18, 2020 at 4:55

Shubham Khatri · Accepted Answer · 2020-05-18 04:59:13Z

17

Since you declare a variable directly in your functional component, its value is reset everytime your component re-renders. You can make use of useRef to declare instance variables in functional component

const Foo = (props) => {
  let instanceVariable = useRef(null);

  const selectValue = (value) => {
    instanceVariable.current = value; // make sure to use instanceVariable.current
  }

  const proccessVariable = () => {
   // Use instanceVariable.current and do some task
  }

  return(
    <SelectionOption onChange={selectValue} />
  );
}

answered May 18, 2020 at 4:59

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Frederik Sohnis Over a year ago

this was a life saver

Sebastian Hurtado · Accepted Answer · 2024-07-04 13:32:37Z

0

I think useState is the correct hook in your case. You have an option that is selected by the user and then you do something with the selected value. That's state.

The React docs mention that useRef is not appropriate for storing information you want to display on the screen. In your case you're displaying a list of options and then the user selects one of them, that is information being displayed on the screen, hence useState would be the correct approach.

answered Jul 4, 2024 at 13:32

Sebastian Hurtado

1,6971 gold badge12 silver badges10 bronze badges

Collectives™ on Stack Overflow

Instance variable reset everytime component re-render in ReactJs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related