use-state-with-callback | Custom hook to include a callback function | Frontend Utils library

 by   the-road-to-learn-react JavaScript Version: 3.0.2 License: MIT

kandi X-RAY | use-state-with-callback Summary

use-state-with-callback is a JavaScript library typically used in User Interface, Frontend Utils, React applications. use-state-with-callback has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i use-state-with-callback' or download it from GitHub, npm.
Custom hook to include a callback function for useState.
    Support
      Quality
        Security
          License
            Reuse
            Support
              Quality
                Security
                  License
                    Reuse

                      kandi-support Support

                        summary
                        use-state-with-callback has a low active ecosystem.
                        summary
                        It has 237 star(s) with 32 fork(s). There are 6 watchers for this library.
                        summary
                        There were 4 major release(s) in the last 12 months.
                        summary
                        There are 4 open issues and 14 have been closed. On average issues are closed in 181 days. There are 1 open pull requests and 0 closed requests.
                        summary
                        It has a neutral sentiment in the developer community.
                        summary
                        The latest version of use-state-with-callback is 3.0.2
                        This Library - Support
                          Best in #Frontend Utils
                            Average in #Frontend Utils
                            This Library - Support
                              Best in #Frontend Utils
                                Average in #Frontend Utils

                                  kandi-Quality Quality

                                    summary
                                    use-state-with-callback has 0 bugs and 0 code smells.
                                    This Library - Quality
                                      Best in #Frontend Utils
                                        Average in #Frontend Utils
                                        This Library - Quality
                                          Best in #Frontend Utils
                                            Average in #Frontend Utils

                                              kandi-Security Security

                                                summary
                                                use-state-with-callback has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
                                                summary
                                                use-state-with-callback code analysis shows 0 unresolved vulnerabilities.
                                                summary
                                                There are 0 security hotspots that need review.
                                                This Library - Security
                                                  Best in #Frontend Utils
                                                    Average in #Frontend Utils
                                                    This Library - Security
                                                      Best in #Frontend Utils
                                                        Average in #Frontend Utils

                                                          kandi-License License

                                                            summary
                                                            use-state-with-callback is licensed under the MIT License. This license is Permissive.
                                                            summary
                                                            Permissive licenses have the least restrictions, and you can use them in most projects.
                                                            This Library - License
                                                              Best in #Frontend Utils
                                                                Average in #Frontend Utils
                                                                This Library - License
                                                                  Best in #Frontend Utils
                                                                    Average in #Frontend Utils

                                                                      kandi-Reuse Reuse

                                                                        summary
                                                                        use-state-with-callback releases are available to install and integrate.
                                                                        summary
                                                                        Deployable package is available in npm.
                                                                        summary
                                                                        Installation instructions, examples and code snippets are available.
                                                                        This Library - Reuse
                                                                          Best in #Frontend Utils
                                                                            Average in #Frontend Utils
                                                                            This Library - Reuse
                                                                              Best in #Frontend Utils
                                                                                Average in #Frontend Utils
                                                                                  Top functions reviewed by kandi - BETA
                                                                                  kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
                                                                                  Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
                                                                                  Get all kandi verified functions for this library.
                                                                                  Get all kandi verified functions for this library.

                                                                                  use-state-with-callback Key Features

                                                                                  Custom hook to include a callback function for useState.

                                                                                  use-state-with-callback Examples and Code Snippets

                                                                                  No Code Snippets are available at this moment for use-state-with-callback.
                                                                                  Community Discussions

                                                                                  Trending Discussions on use-state-with-callback

                                                                                  .map() method using prior state in React
                                                                                  chevron right

                                                                                  Trending Discussions on use-state-with-callback

                                                                                  QUESTION

                                                                                  .map() method using prior state in React
                                                                                  Asked 2021-Mar-11 at 19:25

                                                                                  My app allows users to click on player cards in a Field section, and then for the selected player cards to appear in a Teams section. I have an array (called selectedPlayers) and initially, each element has a default player name and default player image. As the users select players, the elements in the array are replaced one-by-one by the name and image of the selected players.

                                                                                  The state of the array is set in a parent component and then the array is passed to a TeamsWrapper component as a prop. I then map through the array, returning a TeamsCard component for each element of the array. However, my TeamsCards are always one selection behind reality. In other words, after the first player is selected, the first card still shows the default info; after the second player is selected, the first card now reflects the first selection, but the second card still shows the default info. The code for the TeamsWrapper component is below:

                                                                                  import React from "react";
                                                                                  import "./style.css";
                                                                                  import TeamsCard from "../TeamsCard";
                                                                                  
                                                                                  function TeamsWrapper(props) {
                                                                                    const { selectedPlayers } = props;
                                                                                    console.log('first console.log',selectedPlayers)
                                                                                    return (
                                                                                      
                                                                                        {selectedPlayers.map((el, i) => {
                                                                                          console.log('second console.log',selectedPlayers)
                                                                                          console.log('third console.log',el)
                                                                                          return (
                                                                                            
                                                                                              
                                                                                            
                                                                                          );
                                                                                        })}
                                                                                      
                                                                                    );
                                                                                  }
                                                                                  
                                                                                  export default TeamsWrapper;
                                                                                  

                                                                                  I did have this working fine before when the parent was a class-based component. However, I changed it to a function component using hooks for other purposes. So, I thought the issue was related to setting state, but the console logs indicate something else (I think). After the first player is selected:

                                                                                  • the first console log shows a correctly updated array (i.e. the first element reflects the data for the selected player, not the placeholder data)
                                                                                  • the second console log reflects the same
                                                                                  • but the third print still shows the placeholder data for the first element

                                                                                  As mentioned above, as I continue to select players, this third print (and the TeamsCards) is always one selection behind.

                                                                                  EDIT:

                                                                                  Here is the code for the parent component (Picks), but I edited out the content that was not relevant to make it easier to follow.

                                                                                  import React, { useState } from "react";
                                                                                  import { useStateWithCallbackLazy } from "use-state-with-callback";
                                                                                  import TeamsWrapper from "../TeamsWrapper";
                                                                                  import FieldWrapper from "../FieldWrapper";
                                                                                  
                                                                                  const Picks = () => {
                                                                                    const initialSelectedPlayers = [
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                      { playerName: "default name", image: "https://defaultimage" },
                                                                                    ];
                                                                                  
                                                                                    const [count, setCount] = useStateWithCallbackLazy(0);
                                                                                    const [selectedPlayers, setSelectedPlayers] = useState(
                                                                                      initialSelectedPlayers
                                                                                    );
                                                                                  
                                                                                    const handleFieldClick = (props) => {
                                                                                      // check to make sure player has not already been picked
                                                                                      const match = selectedPlayers.some(
                                                                                        (el) => el.playerName === props.playerName
                                                                                      );
                                                                                      if (match) {
                                                                                        return;
                                                                                      } else {
                                                                                        setCount(count + 1, (count) => {
                                                                                          updatePickPhase(props, count);
                                                                                        });
                                                                                      }
                                                                                    };
                                                                                  
                                                                                    const updatePickPhase = (props, count) => {
                                                                                      if (count <= 15) {
                                                                                        updateTeams(props, count);
                                                                                      }
                                                                                      // elseif other stuff which doesn't apply to this issue
                                                                                    };
                                                                                  
                                                                                    const updateTeams = (props, count) => {
                                                                                      const location = [0, 1, 2, 5, 4, 3];
                                                                                      const position = location[count - 1];
                                                                                      let item = { ...selectedPlayers[position] };
                                                                                      item.playerName = props.playerName;
                                                                                      item.image = props.image;
                                                                                      selectedPlayers[position] = item;
                                                                                      setSelectedPlayers(selectedPlayers);
                                                                                    };
                                                                                  
                                                                                    return (
                                                                                      <>
                                                                                        
                                                                                        
                                                                                      
                                                                                    );
                                                                                  };
                                                                                  
                                                                                  export default Picks;
                                                                                  
                                                                                  

                                                                                  Thank you for your help!

                                                                                  ANSWER

                                                                                  Answered 2021-Mar-11 at 19:25

                                                                                  When you update the array you are mutating state (updating existing variable instead of creating a new one), so React doesn't pick up the change and only re-render when count changes, try

                                                                                  const updateTeams = (props, count) => {
                                                                                    const position = count - 1;
                                                                                    const newPlayers = [...selectedPlayers];
                                                                                    newPlayers[position] = {playerName:props.playerName, image:props.image} 
                                                                                    setSelectedPlayers(newPlayers);
                                                                                  };
                                                                                  

                                                                                  This way React will see it is a new array and re-render.

                                                                                  Source https://stackoverflow.com/questions/66587043

                                                                                  Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                                                                                  Vulnerabilities

                                                                                  No vulnerabilities reported

                                                                                  Install use-state-with-callback

                                                                                  You can install using 'npm i use-state-with-callback' or download it from GitHub, npm.

                                                                                  Support

                                                                                  git clone git@github.com:the-road-to-learn-react/use-state-with-callback.gitcd use-state-with-callbacknpm installnpm run test
                                                                                  Find more information at:
                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                  Find more libraries
                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                  Save this library and start creating your kit
                                                                                  Install
                                                                                • npm

                                                                                  npm i use-state-with-callback

                                                                                • CLONE
                                                                                • HTTPS

                                                                                  https://github.com/the-road-to-learn-react/use-state-with-callback.git

                                                                                • CLI

                                                                                  gh repo clone the-road-to-learn-react/use-state-with-callback

                                                                                • sshUrl

                                                                                  git@github.com:the-road-to-learn-react/use-state-with-callback.git

                                                                                • Share this Page

                                                                                  share link

                                                                                  Explore Related Topics

                                                                                  Reuse Pre-built Kits with use-state-with-callback

                                                                                  Consider Popular Frontend Utils Libraries

                                                                                  styled-components

                                                                                  by styled-components

                                                                                  formik

                                                                                  by formium

                                                                                  particles.js

                                                                                  by VincentGarreau

                                                                                  react-redux

                                                                                  by reduxjs

                                                                                  docz

                                                                                  by pedronauck

                                                                                  Try Top Libraries by the-road-to-learn-react

                                                                                  hackernews-client

                                                                                  by the-road-to-learn-reactJavaScript

                                                                                  react-hooks-introduction

                                                                                  by the-road-to-learn-reactJavaScript

                                                                                  use-data-api

                                                                                  by the-road-to-learn-reactJavaScript

                                                                                  react-local-storage

                                                                                  by the-road-to-learn-reactJavaScript

                                                                                  use-custom-element

                                                                                  by the-road-to-learn-reactJavaScript

                                                                                  Compare Frontend Utils Libraries with Highest Support

                                                                                  formik

                                                                                  by formium

                                                                                  ng-zorro-antd

                                                                                  by NG-ZORRO

                                                                                  react-bootstrap

                                                                                  by react-bootstrap

                                                                                  styled-components

                                                                                  by styled-components

                                                                                  hooks

                                                                                  by alibaba

                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                  Find more libraries
                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                  Save this library and start creating your kit