[React] Broadcaster + Operator + Listener pattern -- 19. useBroadcaster & useListener

Instead of always combining useState and useEffect, when can create a utility useBroadcaster hook which allows us to pass in a broadcaster.

export let useBroadcaster = (broadcaster, deps = []) => {
  let [state, setState] = useState(null)
  useEffect(() => {
    broadcaster(setState)
  }, deps)
  return state
}

The important thing to notice here is 'useEffect' only run once in the very begining. Its job is to pass 'setState' function to listener. That's why in the later code you will see we need to check the 'value' come in is actually a function or not:

if (typeof value === "function") {
    listener = value
    return
  }

 

 

We need to be able to capture user input from React and use them as a broadcaster, so we'll lean on the useCallback hook and convert it into a broadcaster. We'll take what we've learned from using callbacks and closures to set up a pattern that can capture a setState then pass values to setState.

let listener
let callbackListener = (value) => {
  if (typeof value === "function") {
    listener = value
    return
  }
  listener(value)
}

let App = () => {
  let onInput = useCallback(callbackListener)
  let state = useBroadcaster(targetValue(onInput))
  return (
    <div>
      <input type="text" onInput={onInput} />
      <p>{state}</p>
    </div>
  )
}

 

We can capture the pattern we created with useCallback into our own useListener hook. 

• This is another example of how you can encapsulates and wrap a piece of functionallity to make it shareable throw out your application code.

// Before
let listener
let callbackListener = (value) => {
  if (typeof value === "function") {
    listener = value
    return
  }
  listener(value)
}

let App = () => {
  let onInput = useCallback(callbackListener)
  let state = useBroadcaster(targetValue(onInput))
  return (
    <div>
      <input type="text" onInput={onInput} />
      <p>{state}</p>
    </div>
  )
}

// After:
export let useListener = (deps = []) => {
  let listener // Now this value is not attatch to the global scope of your module, but to this hook!
  let callbackListener = (value) => {
    // same here with this function
    if (typeof value === "function") {
      listener = value
      return
    }
    listener(value)
  }
  return useCallback(callbackListener, deps)
}

let App = () => {
  let onInput = useListener()
  let state = useBroadcaster(targetValue(onInput))

  return (
    <div>
      <input type="text" onInput={onInput} />
      <p>{state}</p>
    </div>
  )
}

 

The pattern is more important here.

What we want is

• we can pass a 'broadcaster' to 'useBroadcaster' hook
• we can pass a 'listener' to 'useListener' hook
• the working flow can hook up with React framework

 

Imporve for 'useBroadcaster':

export let useBroadcaster = (broadcaster, deps = []) => {
  let [state, setState] = useState(null)
  useEffect(() => {
    broadcaster((value) => {
      if (value === done) {
        return
      }
      setState(value)
    })
  }, deps)
  return state
}