Don’t destructure require from react to improve the esbuild bundle size.

See evanw/esbuild#1183 .

Author: jaydenseric

changelog.md

@@ -17,6 +17,7 @@
 - Test the bundle size using [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack) and [`disposable-directory`](https://npm.im/disposable-directory).
 - Increased the documented bundle size to “< 4 kB” to match that of [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack).
 - Use the correct `kB` symbol instead of `KB` wherever bundle size is mentioned in the package description and readme.
+- Don’t destructure `require` from [`react`](https://npm.im/react) to slightly improve the [`esbuild`](https://npm.im/esbuild) bundle size.
 - Updated the [example Next.js app](https://graphql-react.vercel.app) URL in the readme.
 
 ## 13.0.0

private/useForceUpdate.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useReducer } = require('react');
+const React = require('react');
 
 /**
  * A React hook to force the component to update and re-render.
@@ -12,5 +12,5 @@ const { useReducer } = require('react');
  * @ignore
  */
 module.exports = function useForceUpdate() {
-  return useReducer(() => Symbol())[1];
+  return React.useReducer(() => Symbol())[1];
 };

public/CacheContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for a [`Cache`]{@link Cache} instance.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const CacheContext = require('graphql-react/public/CacheContext.js');
  * ```
  */
-const CacheContext = createContext();
+const CacheContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   CacheContext.displayName = 'CacheContext';

public/HydrationTimeStampContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for the client side hydration [time stamp]{@link HighResTimeStamp}.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const HydrationTimeStampContext = require('graphql-react/public/HydrationTimeStampContext.js');
  * ```
  */
-const HydrationTimeStampContext = createContext();
+const HydrationTimeStampContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   HydrationTimeStampContext.displayName = 'HydrationTimeStampContext';

public/LoadingContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for a [`Loading`]{@link Loading} instance.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const LoadingContext = require('graphql-react/public/LoadingContext.js');
  * ```
  */
-const LoadingContext = createContext();
+const LoadingContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   LoadingContext.displayName = 'LoadingContext';

public/Provider.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useRef } = require('react');
+const React = require('react');
 const { jsx } = require('react/jsx-runtime');
 const Cache = require('./Cache');
 const CacheContext = require('./CacheContext');
@@ -48,11 +48,11 @@ const LoadingContext = require('./LoadingContext');
  * ```
  */
 module.exports = function Provider({ cache, children }) {
-  const hydrationTimeStampRef = useRef();
+  const hydrationTimeStampRef = React.useRef();
   if (!hydrationTimeStampRef.current)
     hydrationTimeStampRef.current = performance.now();
 
-  const loadingRef = useRef();
+  const loadingRef = React.useRef();
   if (!loadingRef.current) loadingRef.current = new Loading();
 
   if (!(cache instanceof Cache))

public/useAutoAbortLoad.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect, useRef } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 
 /**
@@ -37,9 +37,9 @@ module.exports = function useAutoAbortLoad(load) {
         : createArgErrorMessageProd(1)
     );
 
-  const lastLoadingCacheValueRef = useRef();
+  const lastLoadingCacheValueRef = React.useRef();
 
-  useEffect(
+  React.useEffect(
     () => () => {
       if (lastLoadingCacheValueRef.current)
         // Abort the last loading as it’s now redundant due to the changed
@@ -50,7 +50,7 @@ module.exports = function useAutoAbortLoad(load) {
     [load]
   );
 
-  return useCallback(() => {
+  return React.useCallback(() => {
     if (lastLoadingCacheValueRef.current)
       // Ensure the last loading is aborted before starting new loading.
       // Checking if it’s already ended or aborted first is unnecessary.

public/useCache.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useContext, useDebugValue } = require('react');
+const React = require('react');
 const Cache = require('./Cache');
 const CacheContext = require('./CacheContext');
 
@@ -27,11 +27,11 @@ const CacheContext = require('./CacheContext');
  * ```
  */
 module.exports = function useCache() {
-  const cache = useContext(CacheContext);
+  const cache = React.useContext(CacheContext);
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(cache);
+    React.useDebugValue(cache);
 
   if (cache === undefined) throw new TypeError('Cache context missing.');
 

public/useCacheEntry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useDebugValue, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useForceUpdate = require('../private/useForceUpdate');
 const useCache = require('./useCache');
@@ -40,11 +40,11 @@ module.exports = function useCacheEntry(cacheKey) {
   const cache = useCache();
   const forceUpdate = useForceUpdate();
 
-  const onTriggerUpdate = useCallback(() => {
+  const onTriggerUpdate = React.useCallback(() => {
     forceUpdate();
   }, [forceUpdate]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNameSet = `${cacheKey}/set`;
     const eventNameDelete = `${cacheKey}/delete`;
 
@@ -61,7 +61,7 @@ module.exports = function useCacheEntry(cacheKey) {
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(value);
+    React.useDebugValue(value);
 
   return value;
 };

public/useCacheEntryPrunePrevention.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useCache = require('./useCache');
 
@@ -38,11 +38,11 @@ module.exports = function useCacheEntryPrunePrevention(cacheKey) {
 
   const cache = useCache();
 
-  const onCacheEntryPrune = useCallback((event) => {
+  const onCacheEntryPrune = React.useCallback((event) => {
     event.preventDefault();
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNamePrune = `${cacheKey}/prune`;
 
     cache.addEventListener(eventNamePrune, onCacheEntryPrune);