Curls, clouds and code

A blog by Corstian BoermanCorstian Boerman (self portrait)
Corstian Boerman
Reading time: a minute

Hiding React component props within a shadow state

Every now and then I have to deal with an issue where I want to pass props down to a component, handle updates to them, but at the same time want to hide the internal implementation details.

Although I might or might not be better off using a state management solution such as React Context or Redux Toolkit, I decided on still writing about this pattern as I think it has some valid use-cases. In fact, I have no idea whether I'm better off using a state management solution given I never used one. Send help.

The pattern

In order to hide the state transitions going on within a component you should keep a copy of the previous prop value, and compare it with the current prop. If these two do not match you'll know there was a change.

import React, { useState } from 'react'

export function Component({ value, onChange }) {
  const [ _value, _setValue ] = useState()
  const [ _localValue, _setLocalValue ] = useState()

  if (_value !== value) {
    // The variable has changed externally, trigger a value change to override the local value.
    _setValue(value)
    _setLocalValue(value)
  }

  return (
    <input value={value} onChange={(e) => {
      _setLocalValue(e.target.value)
      onChange(e)
    }} />
  )
}

Although the component above has no obvious use for an internal shadow copy of a prop, it provides the boiler plate for how to implement such thing.

Use cases

Recently I had written a datetime input component for which I wanted to expose a different value than generated by the input element itself.


Hey there, I hope you enjoyed this post of mine. If you did, consider sharing this with that one friend who'd also appreciate this. Comments are gone for the time being, but if you feel like discussing something more in-depth, send me a message on the Fediverse, or just email me.

- Corstian