Section 1.1: Updating State or Props

A React component will automatically re-render when there's a change in its state or props. Thus, simply updating these values will prompt a re-render. To modify a state, invoke the setter function associated with that state.

For example, consider the following code:

import React, { useState } from "react";

export default function App() {

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount((c) => c + 1)}>increment</button>

{count}

);

}

In this scenario, we've added a button that calls setCount to update the state of count. The App component will re-render as the updated value of count is displayed upon clicking the increment button.

Similarly, you can also modify a prop value to trigger a re-render. Here's an example:

import React, { useState } from "react";

const Count = ({ count }) => <div>{count}</div>;

export default function App() {

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount((c) => c + 1)}>increment</button>

);

}

In this code, the Count component receives the count prop and displays its value. By updating the count prop through the App component’s state, we ensure that Count re-renders to reflect the latest value.

Section 1.2: Forcing a Component to Re-render

At times, you may wish to forcibly re-render a React component when an external factor changes. To accomplish this, you can create a custom hook. Below is an example:

import React, { useCallback, useState } from "react";

let count = 0;

setInterval(() => {

count++;

}, 1000);

const useForceUpdate = () => {

const [, setTick] = useState(0);

const update = useCallback(() => {

setTick((tick) => tick + 1);

}, []);

return update;

};

export default function App() {

const update = useForceUpdate();

return (

<button onClick={update}>update</button>

{count}

);

}

In this implementation, a setInterval function increases the value of the count variable every second. The useForceUpdate hook is created to update the state using the setTick function. When the button is clicked, it calls the update function, leading to a re-render where the latest value of count is displayed.