How to re-render a react component based on function call?

react forceupdate functional component
react force child component to re-render
react force render hooks
react auto refresh component
react forceupdate example
react setstate callback
componentdidupdate setstate
componentwillmount deprecated

I'm trying to render a list from REST API call and re-render it whenever I add, delete or update a new item.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({});
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [fetchData]);


  const handleClick = () => {
    fetchData();
  }

  return (
    <button onClick={handleClick}>Go</button>
  );
}
export default App;

When the component loads it execute useEffect method but it doesn't work when I click on "Go" button. Is there a way to execute my REST API call and refresh my list of objects?

Thank you.

You can make a state property and toggle it in onClick handler. Then use this property in a dependency array of the useEffect.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({});
  const [refetch, setRefetch] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [refetch]);


  const handleClick = () => {
    setRefetch(!refetch);
  }

  return (
    <button onClick={handleClick}>Go</button>
  );
}
export default App;

Force a React Component to Re-Render, There are multiple ways to force a React component render but they are essentially the same. Assuming your component has a state , you could also call the following: so I wont scold developers for using this brute force method. want to add the components dynamically based on some user action. 💻 Let’s implement the render function and Component class with the information that we are already aware of : The render function accepts a Component and renders it. The Component class has a

Add the data variable to your array which keeps a check of things changing in the useEffect method. It should re-render whenever the data variable changes.

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [fetchData, data]);

Can you force a React component to rerender without calling setState?, Calling forceUpdate() will cause render() to be called on the component, Hooks: How can I force component to re-render with hooks in React? to component props whenever needed based on a mapping function you supply. export default function (stores: SimpleStore[]) { return function (​WrappedComponent: React. At first I thought I could monkey-patch toString on the content getter function. But that didn't work. I still got this warning from React: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

First things first you are using the wrong endpoint. Please test your endpoint and it works with an id. And you don't need useEffect to load data by click event.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

const fetchData = async () => {
  const result = await axios("https://hn.algolia.com/api/v1/items/1");
  return result.data;
};

function App() {
  const [data, setData] = useState(null);

  const handleClick = async () => {
    const x = await fetchData();
    setData(x);
  };

  return (
    <>
      <button onClick={handleClick}>Go</button>
      {data && data.id}
    </>
  );
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can check it from this link https://codesandbox.io/s/unruffled-bhaskara-wtl1r

React Force Rerender, A components forceUpdate() method is called. Anytime a component is re-​rendered (or initially rendered) all of its children components are rendered inside of the  The beauty of React components is that they automagically render and update based on a change in state or props; simply update the state from any place and suddenly your UI element updates — awesome! There may be a case, however, where you simply want to brute force a fresh render of a React component. …

React.Component – React, In the React world, forcing a re-render is frowned upon. We'll pass that to our child component, which is also going to make an API call, To do this, we'll add a method into setNewColor : If you pass only refreshShoeList and then toggle based on that boolean, the component will just update forever  A React component can be created using a function or a class-based component, and the class-based component can use different lifecycle hooks. But quite often, we need to load data from the server to render the same data into the DOM.

How to force-refresh a React child component: the easy way, React re-renders if shouldComponentUpdate returns true for any reason. Not as in “update the DOM render,” but just to call the render method to Depending on your data it might make more sense to check for just one or  If the logic behind the function is heavy, I'll leave it out of render. Here's an example. Say in your component you have a "users" prop that is supposed to display a list of users. You might have a render function with these types of things:

How does React decide to re-render a component?, Examples of Pure components, Stateless function components, shouldComponentUpdate to avoid pointless re-renders in React. life-cycle method which is invoked on state or prop changes before render is called. Use this  Functions are bound when they are invoked and not defined. However, in this case its binding is unnecessary since its scope isn't lost in an inline callback or a method that creates it's own context of this .