The Real Deal with Refs in React

The Real Deal with Using Refs in React

If you are getting into React development, you might have come across different opinions regarding the use of refs. Some people argue that using refs is a bad practice, while others believe it can be beneficial in certain cases. In this blog post, we will explore the real deal with using refs in React and discuss when it is considered a bad practice.

The React Way of Thinking

Before diving into refs, it is essential to understand the core principles of React. React encourages developers to think in a “reactive” way, where components update based on changes in state or props. The idea is to re-render only the necessary parts of the UI, making the application more efficient.

In the React way of thinking, you rarely need to access the DOM directly. Instead, you rely on event handlers and the component state to manage UI updates. For example, if you have an input element in your component, you can track its value using an event handler and update the component’s state accordingly. This triggers a re-render of the component, including the input element with the new value.

import React, { useState } from 'react';

const Example = () => {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  }

  return (
    <div>
      {/* Lots of awesome UI */}
      <input value={inputValue} onChange={handleChange} />
      {/* More awesome UI */}
    </div>
  );
}

As you can see in the example above, we utilize the useState hook to manage the component’s state and then update it whenever the input value changes. This way, we follow the React way of handling changes and avoid directly manipulating the DOM.

When are Refs Considered a Bad Practice?

While refs can be useful in certain scenarios, there are cases where they are considered a bad practice in React. The main reason for this is that using refs goes against the principles of the React architecture and can lead to code that is harder to maintain and understand.

One common misuse of refs is when developers try to use them to access DOM elements directly in order to perform operations similar to the jQuery way. This approach defeats the purpose of React’s virtual DOM and can result in code that is more prone to errors.

Another scenario where using refs is discouraged is when you find yourself passing refs down to child components to access their inner elements. In React, it is recommended to lift the state up instead, allowing parent components to manage and pass data to their children through props.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    this.childRef.current.doSomething(); // Ref access to child component
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Do Something</button>
      </div>
    );
  }
}

Instead of using refs to access and manipulate child components directly, it is better to lift the state or functionality up to the parent component and pass it as props to the children. This promotes a clearer data flow and enables better component composition and reusability.

Understanding the Intention of React

To truly understand when and when not to use refs in React, it is necessary to build more React applications and components. By adhering to the React way of thinking and practicing component-based development, you will gradually gain a better understanding of the intention behind the React architecture.

While there may be rare scenarios where using refs is unavoidable, it is crucial to exercise caution and ensure that you are not bypassing the strengths of React in favor of more traditional approaches. Stick to the React principles and conventions as much as possible, and you will find that your code becomes more maintainable and easier to reason about.

Conclusion

Refs can be a useful tool in React, but they should be used sparingly and only when there is no better alternative. Understanding the React way of thinking and utilizing the core principles of component-based development will help you make informed decisions about when to use refs and when to avoid them. By following the recommended practices and lifting state where necessary, you can build cleaner and more maintainable React applications.

reference : 

reactjs