https://github.com/ayeshakhan07/reactforwardref
Forward Ref in React
https://github.com/ayeshakhan07/reactforwardref
forwardref mui react reactjs
Last synced: 11 days ago
JSON representation
Forward Ref in React
- Host: GitHub
- URL: https://github.com/ayeshakhan07/reactforwardref
- Owner: AyeshaKhan07
- Created: 2022-05-22T15:11:22.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-22T16:07:42.000Z (almost 4 years ago)
- Last Synced: 2025-08-04T04:00:00.798Z (9 months ago)
- Topics: forwardref, mui, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 157 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FORWARD REF IN REACT
## About
This project was created to study the concept of forward ref in React. React forwardRef is a method that allows parent components pass down (i.e., “forward”) refs to their children. Using forwardRef in React gives the child component a reference to a DOM element created by its parent component. This then allows the child to read and modify that element anywhere it is being used.
## Technologies
- [React](https://reactjs.org/)
- [Material UI](https://mui.com/)
## How To Use
```
# Clone this repository
$ git clone https://github.com/AyeshaKhan07/ReactForwardRef.git
# Go into the repository
$ cd ReactForwardRef
# Install dependencies
$ npm install
# Run the app
$ npm start
```
Forward ref is forwarding or passing the reference of the DOM element to the child component. By using forwardRef we can manipulate the element's properties without re-rendering that element. In this project, I created a counter app in which the value is incremented by two methods:
1. React State
2. Forward Ref
While running the app, follow the below steps to get the better understanding:
- Open the console and change the switch to increment by react state.
- You will see every time you press the increment button, this message got printed "component rendered!".
- Now change the switch again to increment by forward ref.
- Now you will see every time you press the increment button, no message got printed on console.
This proves that if we increment the value by state the component will re-render on every increment, but if we increment by forwardRef the component will just update the value without rerendering.
## Further Reading
- https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/
- https://reactjs.org/docs/forwarding-refs.html
## Author
@AyeshaKhan07