WordPress 7.0 introduces a pivotal update to its Interactivity API with the addition of a new watch() function, significantly enhancing developers’ ability to respond to state changes. This change is essential for developers aiming to create more dynamic and responsive WordPress applications.
The watch() function, part of the @wordpress/interactivity package, allows developers to subscribe to changes within any reactive state accessed inside a callback. When these values change, the callback is re-executed, providing a streamlined method to handle reactive data. This development fills a critical gap by allowing the observation of changes independently from the DOM, enabling functionalities such as state synchronization, side effect execution at the store level, and logging setups.
A New Way to Handle Reactivity
The implementation of the watch() function is relatively straightforward and offers a powerful tool for developers. By importing store and watch from @wordpress/interactivity, developers can set up watchers that respond to state changes. For example, consider a counter state managed by a plugin:
import { store, watch } from '@wordpress/interactivity';
const { state } = store( 'myPlugin', {
state: { counter: 0, },
} );
watch( () => {
console.log( 'Counter is ' + state.counter );
} );This setup ensures that whenever the state.counter changes, the callback is executed, logging the current counter value. Additionally, the function provides an unwatch callback to cease the watcher when needed, and supports cleanup functions that execute before re-execution and when the watcher is disposed of.
Deprecation and Server-Side Initialization
WordPress 7.0 also addresses the deprecation of certain state.navigation properties in the core/router store. These properties, used internally for animation purposes, will trigger warnings in development mode, signaling their removal in the future. Developers are advised to prepare for an official mechanism for tracking navigation state in WordPress 7.1.
Furthermore, the state.url in the core/router store now benefits from server-side initialization during directive processing. Previously, developers had to handle an undefined initial state until the module loaded asynchronously. This update allows for reliable client-side navigation tracking, exemplified by using watch() in conjunction with state.url to send analytics on virtual page views:
import { store, watch } from '@wordpress/interactivity';
const { state } = store( 'core/router' );
watch( () => {
sendAnalyticsPageView( state.url );
} );What To Do
- Developers: Integrate the
watch()function into your workflows to enhance state reactivity. Prepare for the deprecation ofstate.navigationproperties. - Plugin Authors: Update your plugins to utilize server-side initialized
state.urlfor consistent client-side navigation data. - Site Operators: Ensure plugins and themes are compatible with WordPress 7.0 updates to avoid future disruptions.
