GithubHelp home page GithubHelp logo

Comments (2)

htshah avatar htshah commented on May 16, 2024

I have exact same issue..
Anyone can help us out...

Code

import React, { useCallback, memo, useRef } from "react";
import { Grid, Button } from "@material-ui/core";

import { useApp } from "../../context/App";
import JoystickContainer from "./component/JoystickContainer";

const HomeScreen = () => {
  const { isConnected, setConnected } = useApp();
  // const [isConnected, setConnected] = useState(false);

  const stickPositionRef = useRef({
    throttle: 0,
    yaw: 0,
    pitch: 0,
    roll: 0
  });

  const setStickPosition = newPosition => {
    stickPositionRef.current = { ...stickPositionRef.current, ...newPosition };
  };

  const handleConnection = () => {
    setConnected(!isConnected);
  };

  const onLeftStickMove = ({ x, y }) =>
    setStickPosition({ throttle: -y, yaw: x });
  const onLeftStickEnd = () => setStickPosition({ yaw: 0 });

  const onRightStickMove = ({ x, y }) =>
    setStickPosition({ pitch: -y, roll: x });
  const onRightStickEnd = () => setStickPosition({ pitch: 0, roll: 0 });
  return (
    <React.Fragment>
      <Grid
        container
        direction="column"
        justify="space-between"
        alignItems="stretch"
        style={{ height: "40%" }}
      >
        <Grid item style={{ height: "30px" }}>
          Grid 1.1
        </Grid>
        <Grid item>Grid 1.2</Grid>
      </Grid>
      {/* Joystick render */}
      <JoystickContainer
        onLeftStickMove={useCallback(onLeftStickMove, [])}
        onLeftStickEnd={useCallback(onLeftStickEnd, [])}
        onRightStickMove={useCallback(onRightStickMove, [])}
        onRightStickEnd={useCallback(onRightStickEnd, [])}
      />

      <Grid
        container
        justify="center"
        style={{ height: "20%", padding: "10px 0" }}
      >
        <Grid item>
          <Button
            variant="contained"
            color="primary"
            onClick={handleConnection}
          >
            {isConnected === false ? "Connect" : "Disconnect"}
          </Button>
        </Grid>
      </Grid>
    </React.Fragment>
  );
};
HomeScreen.whyDidYouRender = true;

export default memo(HomeScreen);

from why-did-you-render.

vzaidman avatar vzaidman commented on May 16, 2024

fixed in v3.0.7

from why-did-you-render.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.