react-9

Understanding useRef() and useParams() in React

React provides many powerful hooks that simplify development. Two commonly used hooks are useRef() and useParams(). Although both are hooks, they serve completely different purposes.

useRef() is used to store values and access DOM elements without causing re-renders.
useParams()is used to read URL parameters in React Router.

What is useRef()?

useRef() is a React Hook that creates a mutable reference that persists across component re-renders.

How it Works
useRef() creates a reference object.
The object contains a property called current.
React stores the actual DOM element inside current.
Calling focus() focuses the input field.

Why use useRef()?

• Access DOM Elements
• Focus input fields
• Scroll to sections
• Play videos
• Measure element size
• Store Values Without Re-rendering

useRef	useState
Does not re-render component	Re-renders component
Stores mutable values	Stores state values
Used for DOM access	Used for UI updates

What is useParams()?

useParams() is a React Router Hook used to access URL parameters from the current route.

Feature	useRef()	useParams()
Purpose	Store references and values	Read URL parameters
Package	React	React Router
Causes Re-render	No	No
Common Use	DOM access	Dynamic routes
Returns	Ref Object	Params Object

Conclusion

useRef() and useParams() solve different problems in React applications.

Use useRef() when you need to access DOM elements, store mutable values, or keep data without triggering re-renders.
Use useParams() when you need to read dynamic values from the URL, such as IDs, usernames, or product information.

Mastering these two hooks will help you build more interactive forms, dynamic routing, and real-world React applications efficiently.