for me just updating the state didn't work. i am using a library with components and it looks like i can't force the component to update.

my approach is extending the ones above with conditional rendering. in my case, i want to resize my component when a value is changed.

//hook to force updating the component on specific change
const useupdateonchange = (change: unknown): boolean => {
  const [update, setupdate] = usestate(false);

  useeffect(() => {
    setupdate(!update);
  }, [change]);

  useeffect(() => {
    if (!update) setupdate(true);
  }, [update]);

  return update;
};

const mycomponent = () => {
  const [mystate, setmystate] = usestate();
  const update = useupdateonchange(mystate);

  ...

  return (
    <div>
      ... ...
      {update && <librarycomponent />}
    </div>
  );
};

you need to pass the value you want to track for change. the hook returns boolean which should be used for conditional rendering.

when the change value triggers the useeffect update goes to false which hides the component. after that the second useeffect is triggered and update goes true which makes the component visible again and this results in updating (resizing in my case).

this can be done without explicitly using hooks provided you add a prop to your component and a state to the stateless component's parent component:

const parentcomponent = props => {
  const [updatenow, setupdatenow] = usestate(true)

  const updatefunc = () => {
    setupdatenow(!updatenow)
  }

  const mycomponent = props => {
    return (<div> .... </div>)
  }

  const mybuttoncomponent = props => {
    return (<div> <input type="button" onclick={props.updatefunc} />.... </div>)
  }

  return (
    <div> 
      <mycomponent updateme={updatenow} />
      <mybuttoncomponent updatefunc={updatefunc}/>
    </div>
  )
}

the accepted answer is good. just to make it easier to understand.

example component:

export default function mycomponent(props) {

    const [updateview, setupdateview] = usestate(0);

    return (
        <>
            <span style={{ display: "none" }}>{updateview}</span>
        </>
    );
}

to force re-rendering call the code below:

setupdateview((updateview) => ++updateview);

none of these gave me a satisfactory answer so in the end i got what i wanted with the key prop, useref and some random id generator like shortid.

basically, i wanted some chat application to play itself out the first time someone opens the app. so, i needed full control over when and what the answers are updated with the ease of async await.

example code:

function sleep(ms) {
    return new promise(resolve => settimeout(resolve, ms));
}

// ... your jsx functional component, import shortid somewhere

const [render, rerender] = usestate(shortid.generate())

const messagelist = useref([
    new message({id: 1, message: "hi, let's get started!"})
])

useeffect(()=>{
    async function _ () {
      await sleep(500)
      messagelist.current.push(new message({id: 1, message: "what's your name?"}))
      // ... more stuff
      // now trigger the update
      rerender(shortid.generate())
   } 
   _()
}, [])

// only the component with the right render key will update itself, the others will stay as is and won't rerender.
return <div key={render}>{messagelist.current}</div> 

in fact this also allowed me to roll something like a chat message with a rolling .

const waitchat = async (ms) => {
    let text = "."
    for (let i = 0; i < ms; i += 200) {
        if (messagelist.current[messagelist.current.length - 1].id === 100) {
            messagelist.current = messagelist.current.filter(({id}) => id !== 100)
        }
        messagelist.current.push(new message({
            id: 100,
            message: text
        }))
        if (text.length === 3) {
            text = "."
        } else {
            text += "."
        }
        rerender(shortid.generate())
        await sleep(200)
    }
    if (messagelist.current[messagelist.current.length - 1].id === 100) {
        messagelist.current = messagelist.current.filter(({id}) => id !== 100)
    }
}

if you are using functional components with version < 16.8. one workaround would be to directly call the same function like

import react from 'react';

function mycomponent() {
    const forceupdate = mycomponent();
    
    return (
        <div>
            <button onclick={forceupdate}>
                click to re-render
            </button>
        </div>
    );
}

but this will break if you were passing some prop to it. in my case i just passed the same props which i received to rerender function.

if you already have a state inside the function component and you don't want to alter it and requires a re-render you could fake a state update which will, in turn, re-render the component

const [items,setitems] = usestate({
   name:'your name',
   status: 'idle'
})
const rerender = () =>{
setitems((state) => [...state])
}

this will keep the state as it was and will make react into thinking the state has been updated

best approach - no excess variables re-created on each render:

const forceupdatereducer = (i) => i + 1

export const useforceupdate = () => {
  const [, forceupdate] = usereducer(forceupdatereducer, 0)
  return forceupdate
}

usage:

const forceupdate = useforceupdate()

forceupdate()

simplest way 👌

if you want to force a re-render, add a dummy state you can change to initiate a re-render.

const [rerender, setrerender] = usestate(false);

...
setrerender(!rerender);     //whenever you want to re-render

and this will ensure a re-render, and you can call setrerender(!rerender) anywhere, whenever you want :)

i used a third party library called use-force-update to force render my react functional components. worked like charm. just use import the package in your project and use like this.

import useforceupdate from 'use-force-update';

const mybutton = () => {

  const forceupdate = useforceupdate();

  const handleclick = () => {
    alert('i will re-render now.');
    forceupdate();
  };

  return <button onclick={handleclick} />;
};

official faq ( https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate ) now recommends this way if you really need to do it:

  const [ignored, forceupdate] = usereducer(x => x + 1, 0);

  function handleclick() {
    forceupdate();
  }

update react v16.8 (16 feb 2019 realease)

since react 16.8 released with hooks, function components have the ability to hold persistent state. with that ability you can now mimic a forceupdate:

function app() {
  const [, updatestate] = react.usestate();
  const forceupdate = react.usecallback(() => updatestate({}), []);
  console.log("render");
  return (
    <div>
      <button onclick={forceupdate}>force render</button>
    </div>
  );
}

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

note that this approach should be re-considered and in most cases when you need to force an update you probably doing something wrong.

before react 16.8.0

no you can't, state-less function components are just normal functions that returns jsx, you don't have any access to the react life cycle methods as you are not extending from the react.component.

think of function-component as the render method part of the class components.