KONY128
Repos
15
Followers
92
Following
163

Load Balancer Implementation for Kubernetes in Bare-Metal, Edge, and Virtualization

1197
154

An up-to-date (unofficial) knowledge base for Go programming self learning

4790
358

A multiplayer Snake Game with delicate graphic, fully armed game sound, local ranking system, and a cute AI snake

10
1

An animated maze game running on a interactive page, containing four algorithms for maze solving and four themes for use. Have fun!

Events

started
Created at 1 week ago
started
Created at 2 weeks ago
Created at 2 weeks ago
started
Created at 3 weeks ago
Created at 1 month ago
issue comment
fix(useWebSocket): add init phase to pass React 18 Strict Mode

I appreciate your review. A patch has been committed to my source code for your comments.

The initialization of the unmountedRef is handled in the hook useUnmountedRef at the mount phase after the intentional unmount. So it's ok in the React 18 Strict Mode.

// The following is the source code of the hook `useUnmountedRef`
import { useEffect, useRef } from 'react';

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false; // Here, the unmountedRef is set to false at every mount process
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

export default useUnmountedRef;

But I decided to edit my code after all. It's because the initialization of the internal states is separated into different places, which could be confusing.

PTAL. Thx.

Created at 1 month ago

chore: apply useRef to unmountedRef

Created at 1 month ago
Created at 1 month ago
pull request opened
fix(useWebSocket): add init phase to pass React 18 Strict Mode

[中文版模板 / Chinese template]

🤔 This is a ...

  • [ ] New feature
  • [x] Bug fix
  • [ ] Site / documentation update
  • [ ] Demo update
  • [ ] TypeScript definition update
  • [ ] Bundle size optimization
  • [ ] Performance optimization
  • [ ] Enhancement feature
  • [ ] Internationalization
  • [ ] Refactoring
  • [ ] Code style optimization
  • [ ] Test Case
  • [ ] Branch merge
  • [ ] Other (about what?)

🔗 Related issue link

Related problems, root cause analysis and description of this fix is in #1922

💡 Background and solution

📝 Changelog

| Language | Changelog | | ---------- | --------- | | 🇺🇸 English | Fix the problem that useWebSocket is not available in React 18 Strict Mode | | 🇨🇳 Chinese | 修复了 useWebSocket 在 React 18 Strict Mode 下不可用的问题 |

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • [x] Doc is updated/provided or not needed
  • [x] Demo is updated/provided or not needed
  • [x] TypeScript definition is updated/provided or not needed
  • [x] Changelog is provided or not needed
Created at 1 month ago
opened issue
`useWebSocket` is not available in React 18 Strict Mode

useWebSocket is not available in React 18 Strict Mode

Environment

  • React: v18.2.0
  • React Dom: v18.2.0

Description

The hook useWebSocket is not available in React 18 Strict Mode:

  • The onOpen and other callback functions provided in parameter options are not invoked;
  • The latestMessage and readyState returned by useWebSocket hook are not updated.

In React 17 Strict Mode, none of the above problems occurred.

Demos

React 18 Strict Mode useWebSocket

React 17 Strict Mode useWebSocket

Root Cause

In React 18, the concept of reusable states was introduced. (ref link)

Therefore, in the React 18 Strict Mode, all components will execute unmount and then mount again, preserving every state at the very first render to check if there's any component assuming it's only mounted or destroyed once. (official docs link)

In the source code of useWebSocket, many internal states are stored using the useRef hook. These states are initialized by the first parameter of the useRef function, which could be a problem in React 18 Strict Mode and later versions of React. Internal states like reconnectTimesRef, unmountedRef etc. will preserve the values from the last call of useWebSocket, which is not what it's expected to be.

For example, In the React 18 Strict Mode, at the very first render, the useWebSocket is called and triggered the mounting stage. Then the useWebSocket is unmounted immediately and then mounted again. At the first unmount process, the state unmountedRef is set to true, but it is not set to false again on the second mount process due to the feature of ensuring-reusable-state. So, when the real WebSocket instance connects, the state unmountedRef is true, which prevents the callback executions like onOpen and state updates like readyState.

The key is all internal states should be explicitly initialized at the mount process.

To fix this problem, I add the explicit initialization procedure of internal states in the useWebSocket at the onMount hook. Furthermore, I notice there's a hook useUnmountedRef in ahooks which handles the initialization of state unmountedRef at the mount stage. So, the state unmountedRef is created by the hook useUnmountedRef rather than explicitly handled by useMount.

All of my modifications have been tested and run correctly now in React 18 Strict Mode. The new code behaves as same as the old one in former React versions. Please review this pull request.

Created at 1 month ago
create branch
KONY128 create branch fix/use-web-socket-strict-mode-18
Created at 1 month ago
Created at 1 month ago
started
Created at 1 month ago
started
Created at 1 month ago
Created at 1 month ago
started
Created at 1 month ago
started
Created at 2 months ago
Created at 2 months ago
started
Created at 2 months ago
Created at 2 months ago
Created at 2 months ago
started
Created at 2 months ago
Created at 2 months ago
Created at 2 months ago
Created at 2 months ago
started
Created at 2 months ago
Created at 2 months ago
Created at 2 months ago
Created at 2 months ago
started
Created at 2 months ago