I am facing given warning in console:

Warning: A string ref, "grid", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We remend using useRef() or createRef() instead.

Here's my line of codes:

  render() {
    return (
      <div className="notes-app"> 
        <h2 className="app-header">NotesApp</h2> 
        <NoteSearch onSearch={text => this.handleSearch(text)} />
        <NoteEditor onNoteAdd={this.handleNoteAdd} />
        <NotesGrid
          notes={this.state.filteredNotes}
          onNoteDelete={this.handleNoteDelete}
        />
      </div>
    );
  }

The snippet of the code editor shows the lines where the warning is pointed

The NotesGrid ponent is as follows:

import Masonry from "masonry-layout";

import React from 'react';
import Note from "./Note";
export default class NotesGrid extends React.Component {
    ponentDidMount() {
      var grid = this.refs.grid;
      this.msnry = new Masonry(grid, {
        itemSelector: ".note",
        columnWidth: 200,
        gutter: 10,
        isFitWidth: true
      });
    }

    ponentDidUpdate(prevProps) {
      if (this.props.notes.length !== prevProps.notes.length) {
        this.msnry.reloadItems();
        this.msnry.layout();
      }
    }

    render() {
      var onNoteDelete = this.props.onNoteDelete;

      return (
        <div className="notes-grid" ref="grid"> //here I Have used the ref
          {this.props.notes.map(function(note) {
            return (
              <Note
                key={note.id}
                onDelete={onNoteDelete.bind(null, note)}
                color={note.color}
              >
                {note.text}
              </Note>
            );
          })}
        </div>
      );
    }
  }

What's the best alternative to resolve it?

I am facing given warning in console:

Warning: A string ref, "grid", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We remend using useRef() or createRef() instead.

Here's my line of codes:

  render() {
    return (
      <div className="notes-app"> 
        <h2 className="app-header">NotesApp</h2> 
        <NoteSearch onSearch={text => this.handleSearch(text)} />
        <NoteEditor onNoteAdd={this.handleNoteAdd} />
        <NotesGrid
          notes={this.state.filteredNotes}
          onNoteDelete={this.handleNoteDelete}
        />
      </div>
    );
  }

The snippet of the code editor shows the lines where the warning is pointed

The NotesGrid ponent is as follows:

import Masonry from "masonry-layout";

import React from 'react';
import Note from "./Note";
export default class NotesGrid extends React.Component {
    ponentDidMount() {
      var grid = this.refs.grid;
      this.msnry = new Masonry(grid, {
        itemSelector: ".note",
        columnWidth: 200,
        gutter: 10,
        isFitWidth: true
      });
    }

    ponentDidUpdate(prevProps) {
      if (this.props.notes.length !== prevProps.notes.length) {
        this.msnry.reloadItems();
        this.msnry.layout();
      }
    }

    render() {
      var onNoteDelete = this.props.onNoteDelete;

      return (
        <div className="notes-grid" ref="grid"> //here I Have used the ref
          {this.props.notes.map(function(note) {
            return (
              <Note
                key={note.id}
                onDelete={onNoteDelete.bind(null, note)}
                color={note.color}
              >
                {note.text}
              </Note>
            );
          })}
        </div>
      );
    }
  }

What's the best alternative to resolve it?

• javascript
• reactjs

2 Answers 2

The issue is with the ponent NotesGrid. Check whether the ponent has usage of 'ref' or not. If ref is using in that ponent. create the ref using React.createRef() (if its a class ponent) or using useRef(if its a functional ponent)

Rewrite the NotesGrid as below

import Masonry from "masonry-layout";
import React from 'react';

import Note from "./Note";

export default class NotesGrid extends React.Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }

  ponentDidMount() {
    this.msnry = new Masonry(this.gridRef.current, {
      itemSelector: ".note",
      columnWidth: 200,
      gutter: 10,
      isFitWidth: true
    });
  }

  ponentDidUpdate(prevProps) {
    if (this.props.notes.length !== prevProps.notes.length) {
      this.msnry.reloadItems();
      this.msnry.layout();
    }
  }

  render() {
    var onNoteDelete = this.props.onNoteDelete;

    return (
      <div className="notes-grid" ref={this.gridRef}>
        {this.props.notes.map((note) => (
          <Note
            key={note.id}
            onDelete={onNoteDelete.bind(null, note)}
            color={note.color}
          >
            {note.text}
          </Note>
        ))}
      </div>
    );
  }
}