deprecate subscribeToStateUpdates, update README

README.md

@@ -92,54 +92,50 @@ function SearchBar() {
 
 ## Class Components
 
-For users that want to use class components instead of functional components, you can use the `AnswersHeadlessContext` directly to dispatch actions, and the `subscribeToStateUpdates` HOC to receive updates from state.
-
-These also work with functional components.
-
-## `subscribeToStateUpdates`
-
-Here is our MostRecentSearch component again, rewritten as a class with `subscribeToStateUpdates`.
-
-```tsx
-import { subscribeToStateUpdates } from '@yext/answers-headless-react';
-import { Component } from 'react';
-
-interface Props {
-  mostRecentSearch: string
-}
-
-class MostRecentSearch extends Component<Props> {
-  render() {
-    return <div>Showing results for {this.props.mostRecentSearch}</div>;
-  }
-}
-
-export default subscribeToStateUpdates(state => ({
-  mostRecentSearch: state.query.mostRecentSearch
-}))(MostRecentSearch);
-```
+For users that want to use class components instead of functional components, you can use the `AnswersHeadlessContext` directly to dispatch actions and receive updates from state.
 
 ## `AnswersHeadlessContext`
 
-And here is our simple SearchBar again, rewritten as a class using `AnswersHeadlessContext`.
+As an example, here is our simple SearchBar again, rewritten as a class using `AnswersHeadlessContext`.
 
 ```tsx
-import { AnswersHeadlessContext, AnswersHeadless } from '@yext/answers-headless-react';
+import { AnswersHeadlessContext, AnswersHeadless, State } from '@yext/answers-headless-react';
 import { Component } from 'react';
 
 export default class Searcher extends Component {
   static contextType = AnswersHeadlessContext;
+  unsubscribeQueryListener: any;
+  state = { query: "" };
+
+  componentDidMount() {
+    const answers: AnswersHeadless = this.context;
+    this.unsubscribeQueryListener = answers.addListener({
+      valueAccessor: (state: State) => state.query.mostRecentSearch,
+      callback: newPropsFromState => {
+        this.setState({ query: newPropsFromState })
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeQueryListener();
+  }
 
   render() {
     const answers: AnswersHeadless = this.context;
-    return <input
-      onChange={evt => answers.setQuery(evt.target.value)}
-      onKeyDown={evt => {
-        if (evt.key === 'Enter') {
-          answers.executeUniversalQuery();
-        }
-      }}
-    />
+    return (
+      <div>
+        <p>Query: {this.state.query}</p>
+        <input
+          onChange={evt => answers.setQuery(evt.target.value)}
+          onKeyDown={evt => {
+            if (evt.key === 'Enter') {
+              answers.executeUniversalQuery();
+            }
+          }}
+        />
+      </div>
+    )
   }
 }
 ```

src/subscribeToStateUpdates.tsx

@@ -1,7 +1,3 @@
-// TODO(SLAP-1485): find out how to specify generic component props without using `any`
-// I sank a 3-4 hours into this but couldn't figure out exactly how to get it to work.
-// May require use of typescript generics.
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComponentType, useReducer, useEffect, useContext } from 'react';
 import { State } from '@yext/answers-headless';
@@ -11,6 +7,10 @@ import isShallowEqual from './utils/isShallowEqual';
 type SubscriberGenerator = (WrappedComponent: ComponentType<any>) => (props: any) => JSX.Element;
 
 /**
+ * @deprecated
+ * For class component, use `AnswersHeadlessContext` directly to dispatch actions and receive state updates.
+ * For functional component, use `useAnswersAcions` and `useAnswersState` instead.
+ *
  * Generates a HOC that updates a given Component's props based on the current
  * answers-headless state and a given mapping function.
  */