score:0
the flickering is due to two reasons:
- creating a new image in each drawing is an expensive operation, so it is best to use a reference, that has brought me a lot of optimization
- the change in size can be felt somewhat abrupt, especially if it is done with the mouse wheel. so the best is to use requestanimationframe.
if you only perform step 1 there will be no flickering.
the code would look like this:
const canvasref = useref(null);
const requestref = useref();
const image = useref(null);
const [cargoheight, setcargoheight] = usestate(100);
const [cargowidth, setcargowidth] = usestate(100);
const draw = () => {
const canvas = canvasref.current;
const img = new image();
const ctx = canvas.getcontext("2d");
canvas.width = image.current.width;
canvas.height = image.current.height;
ctx.drawimage(
image.current,
0,
0,
image.current.width,
image.current.width
);
};
uselayouteffect(() => {
requestref.current = requestanimationframe(draw);
return () => window.cancelanimationframe(requestref.current);
}, [cargoheight, cargowidth]);
return (
<div classname="app">
<img
src={
"https://www.tuexperto.com/wp-content/uploads/2020/01/png.jpg.webp"
}
ref={image}
style={{ display: "none" }}
/>
<cargo ref={canvasref} height={cargoheight} width={cargowidth} />
<button onclick={() => setcargoheight(cargoheight + 50)}>height</button>
<button onclick={() => setcargowidth(cargowidth + 50)}>width</button>
</div>
);
a codesandbox with the solution and the complete example
Source: stackoverflow.com
Related Query
- canvas react component flickers when resizing
- Resizing a React navigation bar component when width is reduced?
- React component background image not fitting properly into the container when resizing the window
- Re-render React component when prop changes
- How to fetch data when a React component prop changes?
- React component render is called multiple times when pushing new URL
- Prevent react component from rendering twice when using redux with componentWillMount
- How to prevent child component from re-rendering when using React hooks and memo?
- React component not updating when store state has changed
- Click event not firing when React Component in a Shadow DOM
- React js - How to mock Context when testing component
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- How to mock out sub-components when unit testing a React component with Jest
- Re-render component when navigating the stack with React Navigation
- React shouldComponentUpdate() is called even when props or state for that component did not change
- gapi is not defined when loading React Component
- How to access state when component unmount with React Hooks?
- Dynamic Opacity not changing when component rerenders in react native
- What is the necessity of "export default connect" when you are connecting your react component to redux store
- componentDidMount() not being called when react component is mounted
- React - How to detect when all sub-components of a parent component are visible to the user?
- Typing React components in Flow when passing a component as a prop
- React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)
- How to pass the match when using render in Route component from react router (v4)
- React SVG disappearing when component rerenders
- Make a Material UI Component in React Sticky when scrolling (not AppBar)
- Dynamic import in react not working when trying to import a component in another directory
- React Redux - How to dispatch an action on componentDidMount when using mapDispatchToProps in a connected component
- Component not updating when I change the props that I pass to it in React
- How to notify parent component of property change when using react hooks?
More Query from same tag
- Nested route not rendering
- How to type custom React hooks that are created in JS and used in a TSX file?
- When using create-react-app why does the development server keep disconnecting?
- componentDidMount returns empty object object axios
- ReactJs: Set data- attributes on elements without JSX
- How to implement Previous Post & Next Post in a Next JS Blog?
- React Loadable doesn't update on browser refresh
- ReactJS communicate with Webview in Native Android ('Android' is not defined no-undef)
- ReactJS: return an alert after fetch
- Does reactJS has filters as we have in angularJS.
- Records from the table is not displayed in the front end
- i want to be able yo open another url inside my react web app
- Getting more than the value of option tag from select element
- Adding missing dependency in useEffect causes recursive loop
- Use params in react Link and get the value of it in another component?
- .map & .slice a unique value from data set
- How to replace current url using react router
- React Typescript: Loop over countries list to create a select input
- What type should I use instead of any?
- How to have # urls to save component app state in React?
- Why am I getting a jsx-loader error when I try to use react-router with webpack>
- React site sometimes not going full width of screen on mobile
- Addable table in React
- When I click the button, I want to change the page background color to another color, not black, how can I do it?
- Forward and backward pagination with relay js
- Multiple Axios calls in same file
- How to turn try catch function into promise function
- Make svg color scale fit the size of the parent div
- Does calling setter of useState hook inside if statement imply BREAKING RULES OF HOOKS?
- Is it possible to control the uncontrollable input text? - React