Right way to fetch data with react using socket.io












1















I didn't found any examples about how to fetch data from express server using react with socket.io.



Now i do something like this:
Server.js



io.on('connection', socket => {
console.log(socket.id)

socket.on('disconnect', () => {
console.log(socket.id + ' disconnected')
})

socket.on('load settings', () => {
socket.emit('settings is here', data)
})
})


React.js



const [socket] = useState(io())
const [settings, setSettings] = useState(false)

useEffect(() => {
try {
socket.emit('load settings');

socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data)
})
} catch (error) {
console.log(error)
}
}, )









share|improve this question




















  • 1





    This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

    – James
    Nov 19 '18 at 22:09











  • yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

    – RTW
    Nov 19 '18 at 22:48











  • Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

    – James
    Nov 19 '18 at 22:55
















1















I didn't found any examples about how to fetch data from express server using react with socket.io.



Now i do something like this:
Server.js



io.on('connection', socket => {
console.log(socket.id)

socket.on('disconnect', () => {
console.log(socket.id + ' disconnected')
})

socket.on('load settings', () => {
socket.emit('settings is here', data)
})
})


React.js



const [socket] = useState(io())
const [settings, setSettings] = useState(false)

useEffect(() => {
try {
socket.emit('load settings');

socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data)
})
} catch (error) {
console.log(error)
}
}, )









share|improve this question




















  • 1





    This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

    – James
    Nov 19 '18 at 22:09











  • yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

    – RTW
    Nov 19 '18 at 22:48











  • Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

    – James
    Nov 19 '18 at 22:55














1












1








1








I didn't found any examples about how to fetch data from express server using react with socket.io.



Now i do something like this:
Server.js



io.on('connection', socket => {
console.log(socket.id)

socket.on('disconnect', () => {
console.log(socket.id + ' disconnected')
})

socket.on('load settings', () => {
socket.emit('settings is here', data)
})
})


React.js



const [socket] = useState(io())
const [settings, setSettings] = useState(false)

useEffect(() => {
try {
socket.emit('load settings');

socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data)
})
} catch (error) {
console.log(error)
}
}, )









share|improve this question
















I didn't found any examples about how to fetch data from express server using react with socket.io.



Now i do something like this:
Server.js



io.on('connection', socket => {
console.log(socket.id)

socket.on('disconnect', () => {
console.log(socket.id + ' disconnected')
})

socket.on('load settings', () => {
socket.emit('settings is here', data)
})
})


React.js



const [socket] = useState(io())
const [settings, setSettings] = useState(false)

useEffect(() => {
try {
socket.emit('load settings');

socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data)
})
} catch (error) {
console.log(error)
}
}, )






javascript reactjs express socket.io react-hooks






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 4:46









Yangshun Tay

9,92353972




9,92353972










asked Nov 19 '18 at 22:06









RTWRTW

44111




44111








  • 1





    This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

    – James
    Nov 19 '18 at 22:09











  • yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

    – RTW
    Nov 19 '18 at 22:48











  • Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

    – James
    Nov 19 '18 at 22:55














  • 1





    This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

    – James
    Nov 19 '18 at 22:09











  • yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

    – RTW
    Nov 19 '18 at 22:48











  • Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

    – James
    Nov 19 '18 at 22:55








1




1





This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

– James
Nov 19 '18 at 22:09





This looks like it would work. Is it failing? Also you don't need to pass that empty array to useEffect. It diffs variables passed into that array to decide whether or not to execute the effect callback.

– James
Nov 19 '18 at 22:09













yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

– RTW
Nov 19 '18 at 22:48





yes, it's working, i just don't know is it a right way! First time trying sockets. If i will not pass empty array, it's will rerender every sec. With empty array it's like to say "do only onse".

– RTW
Nov 19 '18 at 22:48













Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

– James
Nov 19 '18 at 22:55





Oh thats a good point about only wanting this to execute once. Anyways, this looks fine to me.

– James
Nov 19 '18 at 22:55












1 Answer
1






active

oldest

votes


















1














This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).



If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.



Using traditional classes, using socket.io looks like:



class App extends React.Component {
constructor(props) {
super(props);
this.socket = io();
}

componentDidMount() {
this.socket.open();
this.socket.emit('load settings');
this.socket.on('settings is here', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}

componentWillUnmount() {
this.socket.close();
}

render() {
...
}
}


Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).



Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.



Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.



function App() {
const { current: socket } = useRef(io());
const [settings, setSettings] = useState(false);

useEffect(() => {
try {
socket.open();
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data);
})
} catch (error) {
console.log(error);
}
// Return a callback to be run before unmount-ing.
return () => {
socket.close();
};
}, ); // Pass in an empty array to only run on mount.

return ...;
}





share|improve this answer


























  • Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

    – RTW
    Nov 20 '18 at 8:19








  • 1





    You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

    – Yangshun Tay
    Nov 20 '18 at 8:24











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383316%2fright-way-to-fetch-data-with-react-using-socket-io%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).



If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.



Using traditional classes, using socket.io looks like:



class App extends React.Component {
constructor(props) {
super(props);
this.socket = io();
}

componentDidMount() {
this.socket.open();
this.socket.emit('load settings');
this.socket.on('settings is here', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}

componentWillUnmount() {
this.socket.close();
}

render() {
...
}
}


Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).



Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.



Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.



function App() {
const { current: socket } = useRef(io());
const [settings, setSettings] = useState(false);

useEffect(() => {
try {
socket.open();
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data);
})
} catch (error) {
console.log(error);
}
// Return a callback to be run before unmount-ing.
return () => {
socket.close();
};
}, ); // Pass in an empty array to only run on mount.

return ...;
}





share|improve this answer


























  • Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

    – RTW
    Nov 20 '18 at 8:19








  • 1





    You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

    – Yangshun Tay
    Nov 20 '18 at 8:24
















1














This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).



If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.



Using traditional classes, using socket.io looks like:



class App extends React.Component {
constructor(props) {
super(props);
this.socket = io();
}

componentDidMount() {
this.socket.open();
this.socket.emit('load settings');
this.socket.on('settings is here', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}

componentWillUnmount() {
this.socket.close();
}

render() {
...
}
}


Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).



Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.



Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.



function App() {
const { current: socket } = useRef(io());
const [settings, setSettings] = useState(false);

useEffect(() => {
try {
socket.open();
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data);
})
} catch (error) {
console.log(error);
}
// Return a callback to be run before unmount-ing.
return () => {
socket.close();
};
}, ); // Pass in an empty array to only run on mount.

return ...;
}





share|improve this answer


























  • Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

    – RTW
    Nov 20 '18 at 8:19








  • 1





    You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

    – Yangshun Tay
    Nov 20 '18 at 8:24














1












1








1







This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).



If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.



Using traditional classes, using socket.io looks like:



class App extends React.Component {
constructor(props) {
super(props);
this.socket = io();
}

componentDidMount() {
this.socket.open();
this.socket.emit('load settings');
this.socket.on('settings is here', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}

componentWillUnmount() {
this.socket.close();
}

render() {
...
}
}


Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).



Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.



Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.



function App() {
const { current: socket } = useRef(io());
const [settings, setSettings] = useState(false);

useEffect(() => {
try {
socket.open();
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data);
})
} catch (error) {
console.log(error);
}
// Return a callback to be run before unmount-ing.
return () => {
socket.close();
};
}, ); // Pass in an empty array to only run on mount.

return ...;
}





share|improve this answer















This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).



If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.



Using traditional classes, using socket.io looks like:



class App extends React.Component {
constructor(props) {
super(props);
this.socket = io();
}

componentDidMount() {
this.socket.open();
this.socket.emit('load settings');
this.socket.on('settings is here', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}

componentWillUnmount() {
this.socket.close();
}

render() {
...
}
}


Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).



Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.



Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.



function App() {
const { current: socket } = useRef(io());
const [settings, setSettings] = useState(false);

useEffect(() => {
try {
socket.open();
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data);
})
} catch (error) {
console.log(error);
}
// Return a callback to be run before unmount-ing.
return () => {
socket.close();
};
}, ); // Pass in an empty array to only run on mount.

return ...;
}






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 20 '18 at 5:08

























answered Nov 20 '18 at 4:56









Yangshun TayYangshun Tay

9,92353972




9,92353972













  • Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

    – RTW
    Nov 20 '18 at 8:19








  • 1





    You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

    – Yangshun Tay
    Nov 20 '18 at 8:24



















  • Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

    – RTW
    Nov 20 '18 at 8:19








  • 1





    You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

    – Yangshun Tay
    Nov 20 '18 at 8:24

















Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

– RTW
Nov 20 '18 at 8:19







Thank you very match, i understand classes. One more question, i need to share same socket to other components that will want to fetch their own data. So, is it a good idea to just share this socket ref in provider?

– RTW
Nov 20 '18 at 8:19






1




1





You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

– Yangshun Tay
Nov 20 '18 at 8:24





You could create a top level component that communicates with the sockets and passes down the data via context. I don't think the other components should be aware and reference the socket.

– Yangshun Tay
Nov 20 '18 at 8:24




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383316%2fright-way-to-fetch-data-with-react-using-socket-io%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Guess what letter conforming each word

Port of Spain

Run scheduled task as local user group (not BUILTIN)