bbc/simorgh

import { Meta } from '@storybook/blocks';

<Meta title="hooks/useOptimizelyVariation" />

# useOptimizelyVariation hook

The `useOptimizelyVariation` hook handles:

* Decides what variation to show a user via Optimizely
* Automatically updates the variation value if the underlying datafile from Optimizely changes
* Has functionality to override the Optimizely user's attributes
* Uses the `useEffect` hook to prevent issues occuring via server side rendering

`useOptimizelyVariation` must be used in cojunction with the HOC [`withOptimizelyProvider`](https://github.com/bbc/simorgh/tree/latest/src/app/containers/PageHandlers/withOptimizelyProvider) page handler. This is because `useOptimizelyVariation` makes use of features found in the `optimizely` object client that needs to be provided by `withOptimizelyProvider`.

### Usage

Here's an example of its usage:

```jsx
import withOptimizelyProvider from '#containers/PageHandlers/withOptimizelyProvider';
import useOptimizelyVariation from '#hooks/useOptimizelyVariation';

const ExamplePage = () => {
  const variation = useOptimizelyVariation('foo-experiment-id');

  if (variation === 'variation_1') {
    return <p>I am variation 1</p>;
  } else if (variation === 'variation_2') {
    return <p>I am variation 2</p>;
  }

  return <p>I am not a variation</p>;
};

export default withOptimizelyProvider(ExamplePage);
```