logo
Tags down

shadow

React not re-rendering on state change with useState


By : David Ackley
Date : July 29 2020, 03:00 PM
wish helps you You can't use that key if you're modifying the array (in any way other than just adding to it). From the documentation:
code :
let nextQuestionId = 1;

const YourComponent = props => {
    // ...
    const handleNewQuestion = () => {
      setQuestions([
         ...questions,
         <Question
            key={nextQuestionId++}
            count={questions.length}
            formData={formData}
            setFormData={setFormData}
            handleRemoveQuestion={handleRemoveQuestion}
         />
      ]);
   };

   const removeQuestion = id => {
       setQuestions(questions.filter(q => q.id !== id));
   };
};


Share : facebook icon twitter icon

React Hooks: using useState inside useEffect doesn't set the state immediately after first rendering


By : user3155031
Date : March 29 2020, 07:55 AM
seems to work fine Like class-based react components' lifecycle methods, specifically the async nature of setState, so too is the functional counterpart, the useState hook. The current value of the hook remains static during the current render cycle until updates are "flushed" and the component is re-rendered. In your useEffect hook you are trying to access the tabs state value that hasn't been "synched" yet. You should instead access the tabs response array directly if you want the value in this render cycle.
code :
useEffect(() => {
  const allPics = data.map((img, i) => {
    img.node.childImageSharp.index = i
    return img.node.childImageSharp
  })
  setAllPics(allPics)

  // get all tabs
  const tabsArray = getAllTabs(allPics);

  setTabs(tabsArray)

  // default tab when the page first loads
  setCurrentImgs(
    allPics.filter(({ fluid }) => fluid.originalName.includes(tabsArray[0]))
  )
}, []) // pass empty dependency array if you truly only want this to run on mount

How to change useState's state without re-rendering the component, but just its components


By : Marko
Date : March 29 2020, 07:55 AM
Hope that helps I took a shot at answering your question. Basically, you want to be able to calculate a value once and have it updated only when the content changes. You can do this with useEffect. The first parameter for useEffect is a function you want to happen on mount/update. It should return a function to run when your function is unmounted (if any). The second argument are the things that determine if useEffect gets ran. I put it to run when user changes value. Hopefully this is enough to get you started down the path of something. You can read more about useEffect in the docs.
code :
function Comp2(props) {
  const { user, setUser } = useContext(UserProvider);
  const { state, setState } = useState({ value: '' });

  useEffect(() => {
    console.log(user);
    // perform expensive operation
    setValue({ value: 'My expensive operation is now stored' });
    return () => {
      // Do you have anything that you would put in componentWillUnmount()?
      // Put that here
    };
  }, [user]);

 console.log(state.value);

  return (
    <div>
      {user.exists}
    </div>
  )
}

React does not change state after updating state in usestate hook (in custom function form)


By : user3295631
Date : March 29 2020, 07:55 AM
this will help I am using usestate hook in react 16.10.2, but after updating initial state using custom function in usetate hook, react does not trigger a re-render(OtherComponent is not rendered), Here is my react component: , I assume the problem is that you are mutating render?
code :
<button 
  onClick={() => setRender({ ...render, [index]: !render[index] })}
>
  change state
</button>
const CustomComponent = () => (
  <div style={{ marginLeft: 10, background: "red" }}>I'm Selected!</div>
);

function App() {
  const [people] = useState([
    { id: 0, name: "Mario" },
    { id: 1, name: "Luigi" },
    { id: 2, name: "Peach" }
  ]);

  const [selected, setSelected] = useState({});

  return (
    <div>
      {people.map(({ id, name }) => (
        <div
          style={{ display: "flex", cursor: "pointer" }}
          key={id}
          onClick={() => setSelected({ ...selected, [id]: !selected[id] })}
        >
          {name}
          {selected[id] && <CustomComponent />}
        </div>
      ))}
    </div>
  );
}
function App() {
  const [obj, setObj] = useState({ name: "Mario" });
  const change = () => {
    // The following commented code will display no change
    // obj.name = "Peach";
    // setObj(obj);
    setObj({ ...obj, name: "Peach" });
  };
  return (
    <div className="App">
      <div>{obj.name}</div>
      <button onClick={change}>Change!</button>
    </div>
  );
}

App keeps re-rendering when setting state in promise using useState in React


By : user3432068
Date : March 29 2020, 07:55 AM
I hope this helps you . I'd like to make a call to a rest endpoint, retrieve an array of items and display them in the page. , You need to move your api call inside useEffect hook:
code :
useEffect(() => {
  axios
    .get("https://reqres.in/api/users")
    .then(response => {
      console.log(response);
      setUsers(response.data.data);
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });
}, [])

React hooks - useState() is not re-rendering the UI with the new state updates


By : Barfield
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further alright, problem solved with the helpful hint from @skyboyer,
so what happened initially is, the useEffect() acts like componentDidMount() & componentDidUpdate() at the same time, that means whenever there is an update to the state, the useEffect() gets invoked, which means resetting the state with the initial data coming from the server. to fix the issue I needed to make the useEffect() renders the component only one time when it's created/rendered as opposed to rendering it every time there is an update to the state. and this is done by adding an empty array as a second argument to the useEffect() function. as shown below.
code :
 useEffect(() => {
   axios.get('...')
    .then(res => {
      setPosts(res.data)
     })
   }, [])
Related Posts Related Posts :
  • Setting value to nested object not working in angular
  • Module exports for Express Router / Functions
  • Why isn't this factorial finding algorithm O(n!) run-time complexity?
  • Is it possible to reload the page on key press in javascript (without focusing the page)?
  • Highlight rows depending on month
  • How to set initial state of glimmer component based on argument?
  • useState what am I doing wrong?
  • javascript not compiling in rails 6
  • javascript cannot find a method which exists
  • How does String.toLowerCase() actually work? How can one create that functionality manually?
  • Append/Prepend space on outer tag
  • How to stop a function from executing more than x times per day?
  • Trouble adding element with text to DOM tree
  • Append with input value with <li> tag
  • How remove item by ID from localStorage?
  • Convert js object array into associative array
  • Array of JavaScript arrow functions
  • Why state variable inside redux Reducer not not increment by 1
  • Return partial sums of the array items as an array
  • Convert an array which contains strings into key value pairs
  • Send real-time data from networked C program to a browser client to plot
  • React - how to set inline CSS for each element of map function?
  • How to scroll the webpages based on the hand gesture.hand motion
  • Would this be an acceptable solution for a Polyfill for JavaScript bind method?
  • Is there a place to test if code is ES5 compliant / safe?
  • How to add items in select dynamically in react?
  • How do I hide navbar when i select login or signup in react?
  • Same or different instances of a JavaScript code?
  • Implement Tree with checkboxes and drag drop
  • Error in setState while trying to update bookings
  • Line break and inject span with javascript
  • Prevent double active function on live table upload
  • Why does the length of array shows zero when we define a set of array properties using character value instead of numeri
  • Javascript - avoid multiple array.filters being called
  • Angular 8: Trying to use form data to format a string in a service, but page keeps reloading, variable not being reassig
  • ios PWA How to open external link on mobile default safari(not In app browser)
  • How do I get channel information in a Mirth Connect JavaScript Reader Source Connector?
  • How to select a certain cell from a table
  • How to set CORS headers to a client
  • Update Firestore values when App is minimised/closed
  • How to remove space between bootstrap 4 column
  • Reactjs ERR_INVALID_ARG_TYPE
  • Error - ''Uncaught TypeError: Cannot read property 'length"? of undefined''
  • How can I use number as key?
  • handleClick in React
  • Javascript simple animation lagging on mobile
  • Can I cause a floating point precision error?
  • Calling Array.includes() on a accumulator raises a TypeError; .reduce()
  • How to setRequiredLevel specific control or attribute?
  • how to display the data per hour in angular
  • axios get function not working in Reactjs
  • Why a || a = 'bar' will get a reference error in javascript?
  • React Cannot read property 'lastName' of undefined
  • filter array based on IDs available in another array
  • Searching For Existing Values in Array
  • Jest mock for react-select or react-testing-library on change not firing on target change
  • res.redirect after res.json in node.js
  • How is this javascript object destructuring working?
  • How to do backward pagination in dynamoDB with LastEvaluatedKey?
  • How to send props in class component to functional component?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org