Let's say we have a variable that should not be changed with react rendering. Is this possible?, without me having to use a context or raise the variable up a hierarchy in the ponents.

import React, {useState,useMemo,useRef} from 'react'

const Component=()=>{

   const [state,setState] = useState(false)
   const ref = useRef(null)

   let previous = 0

   function increment(){
       previous++
       ref.current.innerHTML = `VARIABLE: ${previous}`
   }

   return (
       <div>
           <div ref={ref}>VARIABLE: {previous}</div>
           <div>
               <button onClick={increment}>Incremente Let</button>
               <button onClick={()=>{setState(!state)}}>Change State</button>
           </div>
       </div>
    )
  }

 export default Component

I know I can use state as well, but let's see that updating the variable will trigger new renders, but the variable doesn't need to be rendered, so why a state. This code is just an example

This example is a demonstration of the problem, not an actual implementation

Let's say we have a variable that should not be changed with react rendering. Is this possible?, without me having to use a context or raise the variable up a hierarchy in the ponents.

import React, {useState,useMemo,useRef} from 'react'

const Component=()=>{

   const [state,setState] = useState(false)
   const ref = useRef(null)

   let previous = 0

   function increment(){
       previous++
       ref.current.innerHTML = `VARIABLE: ${previous}`
   }

   return (
       <div>
           <div ref={ref}>VARIABLE: {previous}</div>
           <div>
               <button onClick={increment}>Incremente Let</button>
               <button onClick={()=>{setState(!state)}}>Change State</button>
           </div>
       </div>
    )
  }

 export default Component

I know I can use state as well, but let's see that updating the variable will trigger new renders, but the variable doesn't need to be rendered, so why a state. This code is just an example

This example is a demonstration of the problem, not an actual implementation

• javascript
• reactjs

• const [previous, setPrevious] = useState(0); then increment with setPrevious( prev => { return prev++; }) – Pellay Commented Apr 4, 2022 at 19:16
• 1 After seeing the unused useMemo import I think the question might have to do with how can you leverage useMemo to optimize unnecessary re-renderings, but that would only make sense if the function is called multiple times with the same arguments, which is not the case for an ever increasing increment function. And also it's not particularly putationally intensive. – sebasaenz Commented Apr 4, 2022 at 19:40
• @Pellay reactjs/docs/hooks-reference.html#useref – rick Commented Apr 4, 2022 at 20:07

2 Answers 2

You could use useRef. The value will persist rerenders and changes will not trigger rerenders.

const previous = useRef(0);

function increment(){
    previous.current++;
}

Since modifying it won't trigger a rerender, you want to make sure you're not rendering the value.

You should use a state variable for previous instead of just a plain variable. Otherwise, if not stateful, the variable will always reset on re-render.

Also there's not need for updating the innerHTML via ref in this case since the variable is already being rendered.

//...
const [previous, setPrevious] = useState(0)

function increment(){
    setPrevious(previous + 1)
}
//...