score:0
every time app
renders, it generates a new handleclick
function and passes it as a prop to <buttondiv>
.
the usememo
hook lists handleclick
in the dependencies.
since handleclick
has changed, the memoized function has to be called to regenerate the result.
you probably want to wrap the creation of handleclick
in usecallback
.
score:0
you are sending a new reference of handleclick
every time that you are rendering the app
with some modifications and using usecallback
you can make it work without re-rendering the divbuttons, usecallback
without deps will generate always the same instance so it won't be refreshing your buttons.
had to remove the items state, since if you add it you will have always the instance of the state at the moment the handleclick is created, so using just the set state and the prevstate we can manage to make it work
const handleclick = usecallback(
(number) => {
console.log("typeof", typeof number, number);
setitems((prevstate) =>
prevstate.includes(number) ?
prevstate.filter((prevslot) => prevslot != number) :
[...prevstate, number]
)
},
[]
);
adding image of working example.
Source: stackoverflow.com
Related Query
- Child component is rerendering despite using useMemo,
- React component not rerendering after state change despite using setState()
- How to prevent child component from re-rendering when using React hooks and memo?
- React: Update Child Component Without Rerendering Parent
- Unit test: simulate the click event of child component in parent using enzyme
- Checking props of a child component with shallow rendering using enzyme
- Passing setState to child component using React hooks
- How do I test props passed to child component using Enzyme Shallow?
- How do I change props from a child component using hooks?
- Reactjs - Setting State from props using setState in child component
- React, updating state in child component using props after async call in parent component
- Unable to call child function from parent using refs with functional component
- Trigger child function from parent component using react hooks
- How to show/hide component in parent component via a button in a child component when using a map of buttons?
- Using specific child components with a generic parent component
- How to pass props of one child component to another child component using parent component
- React using forwardRef always update child component even using memo
- How to call a Parent method in Child Component using Hook (ForwardRef concept)
- How do i prevent unnecessary rerendering in React using useMemo or useCallback?
- Can't use props in child component when using Formik for building a wizard
- React: Pass function property down to pure child component - Rerendering
- Child component not re-rendering even though parent state is updated using hooks
- How to return variables from a component using function as a child component?
- How to submit the child values in parent component using reactjs?
- How do I pass my initialValues to a child component in react using Formik?
- Get all child component hrefs using a React higher-order component
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- Passing a function to Child Component through a Prop using ReactJS
- this.context.history undefined while using <Link> on child component
- How to trigger an event in Parent Component from Child Component onClick() using React Hooks?
More Query from same tag
- 404 error when refreshing the page - React App deployed on Heroku
- Reactfire, aren't mixins deprecated?
- Update internal state based on props (anti-pattern)
- Can I host my React/redux (client and api server) project on github pages?
- How to increment item on button click Reactjs?
- How to make Material-UI GridListTitleBar and Image a Link in ReactJS
- React using SVG as components but SVG while another one does
- Type 'undefined' is not assignable to type 'number' while passing the id
- Where to get JWT token in React/Redux app
- Proper way to manipulate date string with wrong year, but correct time
- Where to import other React component from if you are importing for Reacr component?
- TypeError: Cannot read property 'value' of null in React Form
- How to check login status with React-Redux?
- Posting complex objects with form?
- Reactjs setInterval with scroll only trigger once
- Req.body is Undefined while Post request through Fetch Api
- How am I exporting my object incorrectly?
- Can't connect to (exposed, published) port from host
- How to trigger unmounting of functional components while testing?
- onClick not invoked when clicking on sidebar
- Not able to show fetched data from firebase into reactjs webapp
- React and react-dom still being bundled from the rollup bundler
- React js PrivateRoute show hide a dashboard Component based on JSON web token and fetch call
- React Redux API call, data not making it back to component
- How can I execute a line after a function is done? in javascript (react native)
- Embedding multiple elements in React component
- how to use cordova camera plugin with framework7 react
- ReactJS color not updating
- How to mock react 'dispatch' function from useContext() in a react component using Jest/Enzyme
- Require(img path) not working/ cannot find module "." reactjs