This content originally appeared on DEV Community and was authored by Bukunmi Odugbesan
Today's task is to create a hook to tell if it's the first render. The boilerplate code looks like this:
export function useIsFirstRender(): boolean {
// your code here
}
// if you want to try your code on the right panel
// remember to export App() component like below
// export function App() {
// return <div>your app</div>
// }
To solve this, first, you create a variable to manage the state which is assigned to a default value. We will be using a ref because refs persists across renders without causing re-renders.
const firstRender = useRef(true)
The default value is true, because when we run the application for the first time, that is the first render. Subsequent renders will be false.
The function to set the render values:
useEffect(() => {
firstRender.current = false;
}, [])
return firstRender.current
To know if we achieved our aim, we would display a message when the application renders.
<div>
{firstRender: "First render" ? "Not first render"}
</div>
We used a tenary operator which basically displays the first message if firstRender is true, or the second message if otherwise.
The final code looks like this:
import React, { useRef, useEffect} from "react";
export function useIsFirstRender(): boolean {
// your code here
const firstRender = useRef(true)
useEffect(() => {
firstRender.current = false;
}, [])
return firstRender.current
}
// if you want to try your code on the right panel
// remember to export App() component like below
export function App() {
const isFirstRender = useIsFirstRender()
return (
<div>
{isFirstRender ? "First render" : "Not first render"}
</div>
)
}
That's all folks!
This content originally appeared on DEV Community and was authored by Bukunmi Odugbesan
Bukunmi Odugbesan | Sciencx (2025-09-17T17:13:35+00:00) Coding Challenge Practice – Question 9.. Retrieved from https://www.scien.cx/2025/09/17/coding-challenge-practice-question-9/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.