如何防止使用功能组件重新渲染并反应钩子？

Question

Issue : Web Application re-rendering with input onChange event, thus causing socket to disconnect then reconnect.

Detail : I am creating a small multiplayer game with Socket.io, React, Express, PostgreSql, and Nodejs. I would like the user to be able to search for a room name with an input box and a submit button or create a game with a button.

Question : Is there a way to prevent a re-render when the user inputs the room code in the input box?

---

Code :

App.js

const App = () => {
    const socket = io();
    const [roomCode, setRoomCode] = useState('');

        // CREATE ROOM CODE
    const createRoom = () => {
        socket.emit('create', true)
        socket.once('roomCreated', room => {
            axios.post(`/room/roomCode?room=${room}`)
                .then(({ data }) => {
                    console.log(data);
                })
                .catch(err => console.warn(err))
        })
    }

        // JOIN SPECIFIC ROOM
    const joinRoom = () => {
        axios.post(`/room/findRoom?roomCode=${roomCode}`)
            .then(({ response }) => {
                console.info(response)
            })
            .catch(err => console.warn(err))
    }

    return (
        <div>
            <button
                onClick={createRoom}
            >
                Create
            </button>
            <input
                placeholder="Room Code"
                onChange={(e) => { setRoomCode(e.target.value) }}
            />
            <button onClick={joinRoom}>
                Enter Room Code
            </button>
        </div>
    )
}

Room.js route

roomRouter.post('/findRoom', (req, res) => {
    const { roomCode } = req.query
    Room.findOne({
        where: {
            room_code: roomCode,
        }
    })
        .then(room => {
            room ? res.send(room) : res.send('room does not exist')
        })
        .catch(err => console.warn(err))
})

---

Answer 1

Each time state changes, the entire component is re-rendered, including your first line const socket = io() . Try moving that line on top of your component like so:

const socket = io()

const App = () => {
  // ...
}

Answer 2

changing your socket declaration to

 const [socket] = useState(io());

should fix the issue.

Or simple move it outside the component