React has gone through many shifts in stages that never fail to amaze its fans.

At first, we had mixins to create and manage our interface, then came the concept of class components, and now React Hooks which has changed the way we build our apps in React.

You know what else is great? Knowing some neat tricks you can do in React that will help you to build your apps better (if you came across something you didn’t know you can do, of course).

This article will go over eight neat tricks in React that every React developer should know.

Now, I’m not expecting every single item in this list to be new to you, but I’m hoping that you find at least one item in this list useful to you that you didn’t know you could do until now.

Here are eight tricks in React you should know:

1. Create React Elements With Strings

The first item on this list will go over creating a regular react DOM element with simple strings that represent an HTML DOM element tag. More precisely, a string that represents a DOM element.

For example, you can create React components by assigning the string 'div' to a variable, like so:

// MyComponent.js

import React from 'react'

const MyComponent = 'div'

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <hr />
      <MyComponent>
        <h3>I am inside a {'<div />'} element</h3>
      </MyComponent>
    </div>
  )
}

React will just call React.createElement and use that string to create the element internally. Isn’t that neat?

Used commonly in component libraries like Material UI, you can declare a component prop for which the caller can decide the root node of the component to become the value of props.component, like so:

//MyComponent.js

function MyComponent({ component: Component = 'div', name, age, email }) {
  
  return (
    <Component>
      <h1>Hi {name}</h1>
      <div>
        <h6>You are {age} years old</h6>
        <small>Your email is {email}</small>
      </div>
    </Component>
  )
}

This is how you can use it:

// App.js

function App() {
  return (
    <div>
      <MyComponent component="div" name="George" age={16} email="george@gmail.com">
    </div>
  )
}

You can also pass in your custom component where that will be used as the root node:

function Dashboard({ children }) {
  return (
    <div style={{ padding: '25px 12px' }}>
      {children}
    </div>
  )
}

function App() {
  return (
    <div>
      <MyComponent component={Dashboard} name="George" age={16} email="george@gmail.com">
    </div>
  )
}

App.js

2. Use Error Boundaries

In JavaScript, we are used to handling most errors inside the execution of code with try/catch, the block of code that can “catch” errors that occur. When these errors are caught in the catch block, you can save your application from crashing within code boundaries.

An example of this would look something like this:

function getFromLocalStorage(key, value) {
  try {
    const data = window.localStorage.get(key)
    return JSON.parse(data)
  } catch (error) {
    console.error
  }
}

getFromLocalStorage.js

React is ultimately just JavaScript, so we may assume that we can catch and handle errors using the same strategy. However, due to the nature of React, JavaScript errors inside components corrupt React’s internal state and cause it to emit cryptic errors on future renders.

For this reason, the React team introduced error boundaries, and every React developer should know about them so they can use them in their React apps.

The problem with errors happening prior to error boundaries was that when these cryptic errors were emitted in future renders, after happening in previous renders, React did not provide a way to handle nor recover from them in components. This is why we all need error boundaries!

Error boundaries are React components that catch errors anywhere in the component tree, log them, and can display a fallback UI instead of the component tree that crashed.

They catch errors during rendering, inside lifecycle methods, and inside the constructors of the entire tree below them (which is the reason why we declare and render them at the top of our app somewhere).

Here is an example from the React documentation:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }
  
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true }
  }
  
  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo)
  }
  
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}

ErrorBoundary.js

Then you can use it as a regular component:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

3. Retain Previous Values

While updating props or state, you can retain their previous values just by using React.useRef.

For example, to track the current and previous changes of an array of items, you can create a React.useRef which gets assigned the previous value and a React.useState for the current value:

function MyComponent() {
  const [names, setNames] = React.useState(['bob'])
  const prevNamesRef = React.useRef([])
  
  React.useEffect(() => {
    prevNamesRef.current = names
  })
  
  const prevNames = prevNamesRef.current
  
  return (
    <div>
      <h4>Current names:</h4>
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <h4>Previous names:</h4>
      <ul>
        {prevNames.map((prevName) => (
          <li key={prevName}>{prevName}</li>
        ))}
      </ul>
    </div>
  )
}

MyComponent.js

This works because React.useEffect is run after the components have finished rendering.

When setNames is called, the component re-renders and prefNamesRef will hold the previous names because React.useEffect is the last code executed from the previous render.

And, since we re-assigned prevNamesRef.current in the useEffect, it becomes the previous names in the next render phase because it was last assigned the names from the previous render phase.

4. Use React.useRef for Flexible Non-Stale Value Checks

Before React Hooks were introduced in React, we had the componentDidMount static method of class components if we wanted to ensure operations, like fetching data, happened after the component mounted on the DOM.

When React Hooks came out, it quickly became the most popular way to write our components as opposed to using class components. When we wanted to track if a component has mounted to prevent setting the state after the component unmounts, we would do something like this:

import React from 'react'
import axios from 'axios'

class MyComponent extends React.Component {
  mounted = false
  
  state = {
    frogs: [],
    error: null,
  }
  
  componentDidMount() {
    this.mounted = true
  }
  
  componentWillUnmount() {
    this.mounted = false
  }
  
  async fetchFrogs = (params) => {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', { params })
      if (this.mounted) {
        this.setState({ frogs: response.data.items })
      }
    } catch (error) {
      if (this.mounted) {
        this.setState({ error })
      }
    }
  }
  
  render() {
    return <div>
    <h4>Frogs:</h4>
    <ul>
    {this.state.frogs.map((frog) => <li key={frog.name}>{frog.name}</li>)}
    </ul>
    </div>
  }
}

MyComponent.js

Hooks did not have a componentDidMount after migrating to React Hooks and the concept of memory leaks from state updates occurring after unmounting still applies with Hooks.

However, a similar way to componentDidMount using React Hooks is to use React.useEffect since it is executed after components are finished rendering. If you use React.useRef to assign the value of the mounted value here, you can achieve the same effect as the class component example:

import React from 'react'
import axios from 'axios'

function MyComponent() {
  const [frogs, setFrogs] = React.useState([])
  const [error, setError] = React.useState(null)
  const mounted = React.useRef(false)
  
  async function fetchFrogs(params) {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', {
        params,
      })
      if (mounted.current) {
        setFrogs(response.data.items)
      }
    } catch (error) {
      if (mounted.current) {
        setError(error)
      }
    }
  }
  
  React.useEffect(() => {
    mounted.current = true
    return function cleanup() {
      mounted.current = false
    }
  }, [])
  
  return (
    <div>
      <h4>Frogs:</h4>
      <ul>
        {this.state.frogs.map((frog) => (
          <li key={frog.name}>{frog.name}</li>
        ))}
      </ul>
    </div>
  )
}

MyComponent.js

Another example of a good use case to keep track of latest changes without causing re-renders is to use it in conjunction with React.useMemo like this (source):

function setRef(ref, value) {
  // Using function callback version
  if (typeof ref === 'function') {
    ref(value)
    // Using the React.useRef() version
  } else if (ref) {
    ref.current = value
  }
}

function useForkRef(refA, refB) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null
    }
    return (refValue) => {
      setRef(refA, refValue)
      setRef(refB, refValue)
    }
  }, [refA, refB])
}

useForkRef.js

This will create a new function if the ref props change and are defined. This means that React will call the old forked ref with null, and the new forked ref with the current ref.

And since React.useMemo is used, the refs will be memoized until ref props of refA or refB change, in which natural cleanup occurs from this behavior.

5. Use React.useRef for Customizing Elements That Depend on Other Elements

React.useRef has several useful use cases including assigning itself to the ref prop to React nodes:

function MyComponent() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 })
  const nodeRef = React.useRef()
  
  React.useEffect(() => {
    const pos = nodeRef.current.getBoundingClientRect()
    setPosition({
      x: pos.x,
      y: pos.y,
    })
  }, [])
  
  return (
    <div ref={nodeRef}>
      <h2>Hello</h2>
    </div>
  )
}

MyComponent.js

If we wanted to grab the position of the div element’s coordinates, this example is sufficient.

However, if another element somewhere in the app wants to update their own positions the same time position changes or applies some condition logic accordingly, the best way to do it is using the ref callback function pattern.

When using the callback function pattern, you will receive either the React component instance or the HTML DOM element as the first argument.

The example below just shows a simple example where setRef is the callback function being applied to a ref prop. You can see that, inside setRef, you have the ability to do whatever you need as opposed to directly applying the React.useRef version to the DOM element:

const SomeComponent = function({ nodeRef }) {
  const ownRef = React.useRef()
  
  function setRef(e) {
    if (e && nodeRef.current) {
      const codeElementBounds = nodeRef.current.getBoundingClientRect()
      // Log the <pre> element's position + size
      console.log(`Code element's bounds: ${JSON.stringify(codeElementBounds)}`)
      ownRef.current = e
    }
  }
  
  return (
    <div
      ref={setRef}
      style={{ width: '100%', height: 100, background: 'green' }}
    />
  )
}

function App() {
  const [items, setItems] = React.useState([])
  const nodeRef = React.useRef()
  
  const addItems = React.useCallback(() => {
    const itemNum = items.length
    setItems((prevItems) => [
      ...prevItems,
      {
        [`item${itemNum}`]: `I am item # ${itemNum}'`,
      },
    ])
  }, [items, setItems])
  
  return (
    <div style={{ border: '1px solid teal', width: 500, margin: 'auto' }}>
      <button type="button" onClick={addItems}>
        Add Item
      </button>
      <SomeComponent nodeRef={nodeRef} />
      <div ref={nodeRef}>
        <pre>
          <code>{JSON.stringify(items, null, 2)}</code>
        </pre>
      </div>
    </div>
  )
}

App.js

6. Higher-Order Components

A common pattern in plain JavaScript to create powerful reusable functions is the higher-order function. Since React is ultimately JavaScript, you can also use higher-order functions inside React.

For reusable components, the trick is to use higher-order components.

A higher-order component is when you have a function that takes a component as an argument and returns a component.

Just like how higher-order functions can be employed to abstract away logic and be shared amongst other functions in the app, higher-order components enable us to abstract away logic from components and share them amongst other components.

This means that you can employ a bunch of reusable components to reuse across your application.

Here is an example of a higher-order component. In this snippet, a higher-order component withBorder takes in a custom component and returns a hidden “middle layer” component.

Then, when the parent decides to render this higher-order component that was returned, it is called as a component and receives the props that were passed in from the “middle layer component”:

import React from 'react'

// Higher order component
const withBorder = (Component, customStyle) => {
  class WithBorder extends React.Component {
    render() {
      const style = {
        border: this.props.customStyle ? this.props.customStyle.border : '3px solid teal'
      }
      return <Component style={style} {...this.props} />
    }
  }
  
  return WithBorder
}

function MyComponent({ style, ...rest }) {
  return (
    <div style={style} {...rest}>
        <h2>
          This is my component and I am expecting some styles.
        </h2>
    </div>
  )
}

export default withBorder(MyComponent, {
  border: '4px solid teal'
})

withBorder.js

Conclusion

And that concludes this post! I hope you found this to be valuable and look out for more in the future.

#react #reactjs #javascript