Compose: Deprecate withState in favor of useState (#32368)

WordPress · Jun 1, 2021 · e6ff80f · e6ff80f
1 parent 0a6ac7f
commit e6ff80f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 0 deletions.
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   `withState` HOC has been deprecated. Use `useState` hook instead.
+
 ## 4.1.0 (2021-05-20)
 
 ## 4.0.0 (2021-05-14)

diff --git a/packages/compose/README.md b/packages/compose/README.md
@@ -535,6 +535,8 @@ _Returns_
 
 <a name="withState" href="#withState">#</a> **withState**
 
+> **Deprecated** Use `useState` instead.
+
 A Higher Order Component used to provide and manage internal component state
 via props.
 

diff --git a/packages/compose/src/higher-order/with-state/README.md b/packages/compose/src/higher-order/with-state/README.md
@@ -1,5 +1,7 @@
 # withState
 
+**Deprecated**
+
 `withState` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) which enables a function component to have internal state.
 
 Wrapping a component with `withState` provides state as props to the wrapped component, along with a `setState` updater function.

diff --git a/packages/compose/src/higher-order/with-state/index.js b/packages/compose/src/higher-order/with-state/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -12,11 +13,17 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  * A Higher Order Component used to provide and manage internal component state
  * via props.
  *
+ * @deprecated Use `useState` instead.
+ *
  * @param {?Object} initialState Optional initial state of the component.
  *
  * @return {WPComponent} Wrapped component.
  */
 export default function withState( initialState = {} ) {
+	deprecated( 'wp.compose.withState', {
+		alternative: 'wp.element.useState',
+	} );
+
 	return createHigherOrderComponent( ( OriginalComponent ) => {
 		return class WrappedComponent extends Component {
 			constructor() {

diff --git a/packages/compose/src/higher-order/with-state/test/index.js b/packages/compose/src/higher-order/with-state/test/index.js
@@ -41,9 +41,11 @@ describe( 'withState', () => {
 		const wrapper = TestUtils.renderIntoDocument(
 			getTestComponent( EnhancedComponent )
 		);
+
 		const buttonElement = () =>
 			TestUtils.findRenderedDOMComponentWithTag( wrapper, 'button' );
 
+		expect( console ).toHaveWarned();
 		expect( buttonElement().outerHTML ).toBe( '<button>0</button>' );
 		TestUtils.Simulate.click( buttonElement() );
 		expect( buttonElement().outerHTML ).toBe( '<button>1</button>' );