REFS In React JS
Refs In React JS

React Refs

  • In React JS, Refs are used to store the reference of an element.
  • In React JS, By using Refs we can make changes to the element directly in the actual DOM.

Refs In React

  • In React JS, Refs is the shorthand used for references in React.
  • In React JS, It is similar to keys in React.
  • In React JS, It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements.
  • In React JS, It provides a way to access React DOM nodes or React elements and how to interact with it.
  • In React JS, It is used when we want to change the value of a child component, without making the use of props.
  • Note: You should have to avoid overuse of the Refs.

How to create Refs In React App

  • In React JS, Refs can be created by using React.createRef().
  • It can be assigned to React elements via the ref attribute.
  • It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.

How to access Refs In React App

In React JS, when a ref is passed to an element inside render method, a reference to the node can be accessed via the current attribute of the ref.

Source Code


import React, { Component } from 'react'
import { createRef } from 'react'

export default class RefComponent extends Component {
    constructor(props) {
      this.myRef = createRef();
      this.myRef2 = createRef();

    handleHeading = () => {
        this.myRef.current.align = "right";
        // this.myRef.current.hidden = true; = "red"; = "yellow";

  render() {
    return (
        <h1 ref={this.myRef}>Welcome To Learning Never Ends</h1>
        <h1 ref={this.myRef2}>Mohammad Adil</h1>
        <button onClick={this.handleHeading}>Click</button>

App.js File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import Stylesheet2 from './Stylesheet2';
import BsComponent from './BsComponent';
import USComponent from './USComponent';
import USWithObject from './USWithObject';
import USWithArray from './USWithArray';
import ClassState from './ClassState';
import FunctionState from './FunctionState';
import ClassEffects from './ClassEffects';
import FunctionEffect from './FunctionEffect';
import CompA from './CompA';
import { createContext } from 'react';
import { useState } from 'react';
import ControlledForm from './ControlledForm';
import ControlledFunction from './ControlledFunction';
import MultipleInputs from './MultipleInputs';
import FunctionInputs from './FunctionInputs';
import OtherInputs from './OtherInputs';
import MultipleChecks from './MultipleChecks';
import RefComponent from './RefComponent';
import UnControlled from './UnControlled';
import CallbackRefComp from './CallbackRefComp';
import HookuseRef from './HookuseRef';
import HookUseRef2 from './HookUseRef2';

function App() {
    return (

export default App

Index.js File Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
    <div className='App'>
        <App />

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

Download Notes & Source Code of This Blog, From the Link Given Below

No responses yet

Leave a Reply

Your email address will not be published.