CODEWITHSUNDEEP
reactjsreact-hookschakra-ui
HermDP
HermDP

Reputation: 215

React with chakra doesn't trigger useEffect

I'm doing first steps on using chakra ui with create-react-app. The UI would be a live data viewer (using react-plotly). The socket.io server emits new json data each second if triggered by a send_plot_data emit and the ui should plot the data using plotly-react

Without chakra code below works like a charm. With chakra the socket.emit lines to request configuration (get_config) and request plot data (send_plot_data) don't get triggered (I looked in the socket.io server logs).

Most of the code below (except buttons, which should also trigger some emit's and populate dropbox options according to the received JSON data)

Why is this code not working as supposed to be with chakra ? without chakra it works. Is there an easy fix ?

import React, { useEffect, useState } from 'react';
import {io} from 'socket.io-client';
import Plot from 'react-plotly.js';

import {
  ChakraProvider, Flex, Box, Spinner, Container, Text
} from '@chakra-ui/react';

const socket = io("http://192.168.0.101:5000");

const App = () => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
      socket.on("connect",()=>{
        console.log(`Connected`);
        socket.emit("send_plot_data", {symbol: "default"});
        socket.emit("get_config", {config: ""});
      });
      socket.on("do_graph", res => {
        console.log(`Graph plot ok`)
        if(loading===true){
          setLoading(false);
        }
        let response = JSON.parse(res);
        response.config = {responsive: true}
        setData(response);
      });
      socket.on("connect_error", (err) => {
        console.log(`connect_error due to ${err.message}`);
      });
      return () => socket.disconnect();

  //eslint-disable-next-line
  }, []);

  return (
   <ChakraProvider resetCSS>
         <Box>
             {loading?(
                <Flex flexDirection="column" alignItems="center">
                  <Container minHeight="10vh">
                  </Container>
                  <Spinner />
                  <Text fontSize='lg'> Loading plot data ... </Text>
                </Flex>
              ):(
                <Plot {...data} />
              )}
          </Box>
    </ChakraProvider>
  );
}

Upvotes: 3

Views: 312

Answers (2)

HermDP
HermDP

Reputation: 215

Seems to be a problem with React 18.

Downgraded to 17 with MUI instead of 18 and chakra and works.

chakra (even v1) needs framer-motion. framer-motion needs react 18

Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   framer-motion@"*" from the root project
npm ERR!   peer framer-motion@">=4.0.0" from @chakra-ui/[email protected]
npm ERR!   node_modules/@chakra-ui/react
npm ERR!     @chakra-ui/react@"*" from the root project

Upvotes: 1

stasdes
stasdes

Reputation: 669

maybe try to move the creation of the socket inside the useEffect

const socket = io("http://192.168.0.101:5000");

looks like the connect event triggered before the app component is mounted and no one listens to it...

Upvotes: 0

Related Questions