feat (Hooks): Add useFeature hook

[jamesopti]

Summary

This PR adds a React Hook called useFeature, enabling feature usage (with variables) via the hooks interface.

The API designed here is intended to be feature complete with the <OptimizelyFeature> component.

Justification - Why add hooks?

Despite just being the new hotness in the React world, there are a couple good reasons to supporting the hooks paradigm in this SDK:

• Easy use of features/variables outside the context of JSX markup
• Allow consumers to avoid using class components (mostly in the interest of bundle size)
  • This could also be done by rewriting <OptimizelyFeature> as a functional component that itself leverages built in React hooks for state management

TODO

• Update hook to return a third argument, clientReady, which will indicate whether or not the client is ready.
• Add more tests for usage of the options and overrides

Example Usage

Directly from the README update:

arguments

• feature : string Key of the feature
• options : Object
  • autoUpdate : boolean (optional) If true, this component will re-render in response to datafile or user changes. Default: false.
  • timeout : number (optional) Rendering timeout as described in the OptimizelyProvider section. Overrides any timeout set on the ancestor OptimizelyProvider.
• overrides : Object
  • overrideUserId : string (optional) Override the userId for calls to isFeatureEnabled for this hook.
  • overrideAttributes : optimizely.UserAttributes (optional) Override the user attributes for calls to isFeatureEnabled for this hook.

import { useEffect } from 'react';
import { useFeature } from '@optimizely/react-sdk';

function LoginComponent() {
  const [isEnabled, variables] = useFeature('feature1', { autoUpdate: true }, { /* (Optional) User overrides */ });
  useEffect(() => {
    document.title = isEnabled ? 'login1' : 'login2';
  }, [isEnabled]);

  return (
    <p>
      <a href={isEnabled ? "/login" : "/login2"}>
        {variables.loginText}
      </a>
    </p>
  )
}

AutoUpdate

A utility was added to help manage auto updates of the feature and it's variables in autoUpdate.ts. Eventually, this utility can be used in a useExperiment hook.

Additionally, the useFeature and useExperiment hooks could then handle all the state management and auto update logic for <OptimizelyFeature> and <OptimizelyExperiment>, allowing those to just be thin wrapper components.

Test Plan

Minimal unit tests have been added to test the base case(s) here. Additional testing of the optional parameters will be added once this overall approach is agreed upon.

Note: Until we upgrade to React 16.9, there will be errors in the hooks.spec.tsx unit tests about not wrapping state setting test actions in act(). React 16.9 introduces async support for act(), which will allow us to wrap our invocation of await client.onReady()

Issues

Addresses #6

[mjc1283]

Looks good to me, no big objections, just questions, mainly the one about how/when optimizely is falsy.

I guess this means we drop support for React <16.9, is that right?

Allow consumers to avoid using class components (mostly in the interest of bundle size)
This could also be done by rewriting as a functional component that itself leverages built in React hooks for state management

Interesting, I wonder how much bundle size we could save by rewriting all our classes as hooks.

[mjc1283]

LGTM, just a few small suggestions about docs and logging.

[circAssimilate]

This is going to be so great to use, @jamesopti and really change the speed at which we can ship / cleanup feature flags in the frontend. Requesting changes for some answers but nothing I see blocking thus far.

[circAssimilate]

Thanks for all the info @jamesopti!