React native | websocket reload on rerender - reactjs

Question

I'm building small application about smart home using websocket. When i press device icon to toggle it, websocket sends message and updates state device is enabled or not. Problem is after updating component, it creates new websocket connection, not saving old one. Can anyone give some advice? What am i doing wrong?Better to use other npm lib? Here is code:
`
import React, { useRef, useState,useEffect } from 'react'
import { StyleSheet, Text, View, Pressable} from 'react-native'
import LightBulbOn from '../../assets/icons/light-bulb.svg'
import Power from '../../assets/icons/power.svg'
export default function Light({ ip,id,openModal }) {
const client = React.useRef()
useEffect(() => {
client.current = new WebSocket('ws://192.168.0.107/ws')
client.current.onopen = (message) => {
let data = JSON.parse(message.data)
alert(data)
let arr = [...devices]
arr[0].condition = data.light1
arr[1].condition = data.light2
setDevices(arr)
}
client.current.onmessage = message =>{
let data = JSON.parse(message.data)
let arr = [...devices]
arr[0].condition = data.light1
arr[1].condition = data.light2
setDevices(arr)
}
client.current.onerror = message =>{
alert(message)
}
},[ip])
function sendMessage(id){
if(!client.current) {
alert('not client')
// client.current = new WebSocket('ws://192.168.0.105/ws')
return
}
let message = devices[id].condition?'->off':'->on'
client.current.send("light" + devices[id].id + message)
}
const [devices, setDevices] = useState([
{
id: 1,
deviceName: 'ნათურა 1',
condition: 0,
},
{
id: 2,
deviceName: 'ნათურა 2',
condition: 0
}
])
return (
<View style={styles.container} >
<Pressable style={styles.lightContainer} onLongPress={()=>openModal(id)} onPress = {()=> sendMessage(0)}>
<View style={styles.containerRow}>
<LightBulbOn width='30' height='30' />
<Power width='20' height='20' />
</View>
<View style={styles.description}>
<Text style={{ fontWeight: 'bold' }}>{devices[0].deviceName}</Text>
<Text>{devices[0].condition?'ჩართული':'გამორთული'}</Text>
</View>
</Pressable>
<Pressable style={styles.lightContainer} onLongPress={()=>openModal(id)} onPress = {()=> sendMessage(1)}>
<View style={styles.containerRow}>
<LightBulbOn width='30' height='30' />
<Power width='20' height='20' />
</View>
<View style={styles.description}>
<Text style={{ fontWeight: 'bold' }}>{devices[1].deviceName}</Text>
<Text>{devices[1].condition?'ჩართული':'გამორთული'}</Text>
</View>
</Pressable>
</View>
)
}
`
Thanks in advance

Answer 1

Suggest you can try this one instead:
https://github.com/Sumit1993/react-native-use-websocket
And if you pass nothing to useRef, it will return you undefined that can not serializable which might cause the problem.