Undocumented props; Hooks in production - PART 1

July 18, 2019

Tuesday, July 15th - Launch Darkly

One of my coworkers was given a ticket to enable Launch Darkly on our consumer web app. Naturally, he went to consult their React SDK documentation. Their SDK provides a few things, two higher order components (HOC) - withLDProvider + withLDConsumer - and two hooks that replace the consumer HOC - useFlags + useLDClient. How to actually call the different client methods is (IMO) sloppily documented, in contrast with other amazingly well-documented libraries, like Gatsby.

`withLDConsumer` had an undocumented prop

My coworker got pretty stressed because it seemed like it was impossible to interface with the Launch Darkly client. Eventually, I was asked for help for the ticket at hand, and so I had to check the documentation as well. When looking up documentation for withLDConsumer, there was only mention of one injected flags props, and so I could understand his confusion and stress as to how we were supposed to interface with the client. I went on to read about the two hooks, that supposedly can be used in place of the HOC.

import { withLDConsumer } from 'launchdarkly-react-client-sdk'

// withLDConsumer actually injects 2  props...
// ... but documentation only showed `flags`...

const Foo = withLDConsumer()({ flags }) => {
  // Do something with `flags`
  return <>blep</>
}

import { useFlags, useLDClient } from "launchdarkly-react-client-sdk"

const Bar = () => {
  // Ok, this is the hooks equivalent for the `flags` prop injected by the HOC
  const flags = useFlags()

  // Wait, if I apply the same thought process here...
  const ldClient = useLDClient()

  // ...Then shouldn't there be an `ldClient` props injected too?!?

  return <>bloop</>
}

`console.log()`ing to victory

So given my hypothesis that the useFlags hook was the equivalent of the injected flags prop, the useLDClient must be the equivalent of a much needed and undocumented ldClient prop. This is what I did to find out:

const Foo = withLDConsumer()({ flags, ...props }) => {

  // I wonder what gets logged...
  console.log("props", props)

  return <>blep</>
}

Low and behold, our ldClient was right there in our Chrome dev tools console. So, we carried on… relieved.

Docs & Tweeting @LaunchDarkly

I immediately suggested some edits to Launch Darkly’s React SDK docs, and tweeted at them. They responded pretty fast. I showed my coworker, and he thought it was hilarious.