From eadf5df82c6c68a8d3e6b34be58e63d61ce23570 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan.marks@instacart.com>
Date: Wed, 22 Jan 2020 18:31:10 -0500
Subject: [PATCH] Fix initial enhancer state for fn components

---
 src/__tests__/enhancer-test.js | 18 ++++++++++++++++++
 src/enhancer.js                |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/enhancer-test.js b/src/__tests__/enhancer-test.js
index 980abcff..e52378a2 100644
--- a/src/__tests__/enhancer-test.js
+++ b/src/__tests__/enhancer-test.js
@@ -21,6 +21,24 @@ describe('Enhancer', () => {
     expect(ref.current.state).to.deep.equal({_radiumStyleState: {}});
   });
 
+  it('sets up initial state on a function component', () => {
+    // using plugin API to get state as state hooks keep things pretty private
+    // so we cannot just dive into the component instance like with the class example
+    const dummyPlugin = sinon.spy();
+    const Composed = props => <div {...props} />;
+    const Enhanced = Enhancer(Composed, {
+      plugins: [dummyPlugin]
+    });
+
+    renderFcIntoDocument(<Enhanced style={{color: 'red'}} />);
+
+    const pluginApi = dummyPlugin.getCall(0).args[0];
+
+    expect(pluginApi.getComponentField('state')).to.deep.equal({
+      _radiumStyleState: {}
+    });
+  });
+
   it('merges with existing state', () => {
     class Composed extends Component {
       constructor(props) {
diff --git a/src/enhancer.js b/src/enhancer.js
index 52774d33..a0c20137 100644
--- a/src/enhancer.js
+++ b/src/enhancer.js
@@ -178,7 +178,7 @@ function createEnhancedFunctionComponent(
     const {radiumConfig, ...otherProps} = props;
     const radiumConfigContext = useContext(RadiumConfigContext);
     const styleKeeperContext = useContext(StyleKeeperContext);
-    const [state, setState] = useState({});
+    const [state, setState] = useState({_radiumStyleState: {}});
 
     const enhancerApi = useRef<EnhancerApi>({
       state,