How to prevent a re-render with a functional component and react hooks?

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)) })

Alen.Toma · Accepted Answer · 2021-03-10 22:28:02Z

1

changing your socket declaration to

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

should fix the issue.

Or simple move it outside the component

answered Mar 10, 2021 at 22:28

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

codemonkey Over a year ago

If you keep it inside the component, useRef is a much better option.

Ryan · Accepted Answer · 2021-03-10 22:23:10Z

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 = () => { // ... }

answered Mar 10, 2021 at 22:23

Ryan

1,0601 gold badge8 silver badges24 bronze badges

2 Comments

Larry Schwall Over a year ago

AMAZING. That solved my issue. Something so easy.

Ryan Over a year ago

If this resolved your issue please mark it as the correct answer :)

Collectives™ on Stack Overflow

How to prevent a re-render with a functional component and react hooks?

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related