DEV Community

Discussion on: Simplify condition rendering in React.js

View post
Collapse
 
jfullerco profile image
jfullerco •

Figured I’d share one of the first use cases I found for this and it’s one I believe could be helpful to others. That’s in hydrating state with React Router useHistory state in the event of a browser refresh.

import React from ‘react’
const CheckIfCacheNeeded = ({
   value, 
   setValue, 
   fallbackValue, 
   handleRestore, 
   children }) => {
   value != undefined ? value : 
   handleRestore(fallbackValue, setValue)
 return(
   {children}
  )
}
export default CheckIfCacheNeeded
Enter fullscreen mode Exit fullscreen mode

When calling the component you’d need to add a handleRestore function that took the fallbackValue and setter function as parameters.

It works well with React Router useHistory state that persists during browser refresh.