Comments (2)
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.
fixed in v3.0.7
from why-did-you-render.
Related Issues (20)
- use jotai always diff
- dom npm
- wdyr not work in next13 (repo provided) HOT 2
- wdyr not work in next13 (repo provided)
- WDYR includes full lodash library with window._ override HOT 6
- Cannot get WDYR output from nextjs dynamically loaded component (e.g. for no-ssr use case) HOT 2
- Project still being actively maintained? HOT 2
- Multiple React roots
- why-did-you-render + React Query
- No logs or anything about WDYR HOT 9
- Missing `ownerDataMap` in `notifier`
- Partially Working with React 18 + NextJS 13
- "Support for defaultProps will be removed" error after setting include: [/./] option HOT 2
- Tracking custom hooks issue HOT 2
- WhyDidYouRender is not working in Storybook.js
- Property 'React' doesn't exist HOT 1
- react-refresh-webpack-plugin not updating component when wrapped with React.memo.
- `trackAllPureComponents: true` is not working
- Next.js example is missing
- Links from the Credits section are broken HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from why-did-you-render.