React JS 19 Tutorial in Hindi #43 Keep Your Components Pure in React.js

What is pure function js

What is pure component

Example of impure component(avoid)

Example of pure component

Interview Question

In JavaScript, a pure function is a function that satisfies two key conditions:

✅ 1. Deterministic (Same input → Same output)

Given the same arguments, a pure function always returns the same result.

✅ 2. No Side Effects

A pure function doesn’t change anything outside its scope, like:

  1. Modifying global variables
  2. Changing parameters
  3. Updating the DOM
  4. Making API calls or reading files
import { useRef } from "react"
import UserInput from "./UserInput";

function App() {
const inputRef=useRef(null)

const updateInput=()=>{
inputRef.current.value=1000;
inputRef.current.focus();
inputRef.current.style.color="red"
}
return (
<>
<h1>Forward Ref</h1>
<UserInput ref={inputRef} />
<button onClick={updateInput}>Update Input field</button>
</>
)
}

export default App