React Tips — Scroll to Element, Load Fonts, Run setState in Sequence

In this article, we’ll look at some tips for writing better React apps.

Access Component Methods from the Outside in React

We can access component methods from the outside if we assign a ref to the component.

For instance, we class components, we can write:

const ref = React.createRef()

const parent = (<div>
  <Child ref={ref} />
  <button onClick={e => console.log(ref.current)}>click me</button>
</div>)

We create the ref with the React.createRef method.

Then we pass the ref to the Child component.

Then we can get the component with the ref.current property as we did in the onClick callback.

Scroll to an Element in a React Component

We can scroll to an element within a React component by using the window.scrollTo method with a ref.

For instance, in function components, we can write:

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

const App = () => {
  const myRef = useRef(null)
  const scrollTo = () => scrollToRef(myRef)
  return (
    <>
      <div ref={myRef}>scroll to me</div>
      <button onClick={scrollTo}>click me to scroll</button>
    </>
  )
}

We create the scrollToRef function to call scrollTo .

We want to scroll to the top of the element, so get ref.current.offsetTop to get that and use that as the 2nd argument.

Then in App , we called the useRef hook to create our ref.

Then we can pass our ref to the div to assign it.

Once we did that, we add the scrollTo method to scroll to the div which is assigned to our ref.

With class components we can do the same thing.

For instance, we can write:

class App extends Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }

  render() {
    return <div ref={this.myRef}></div>
  }

  scrollToRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
}

We create our ref with React.createRef and then scroll to it with the scrollToRef method.

We get the element with the current property.

The scrolling logic is the same.

If we use a ref callback to assign our ref, then we can write:

class App extends Component {

  render() {
    return <div ref={(ref) => this.myRef = ref}></div>
  }

  scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)
}

We pass in a callback to the ref prop instead of using createRef to create our ref.

Then we get the element that’s assigned to the ref without the current property.

Run a Function After setState is Finished Updating

We can run a function after setState finishes updating by passing in a callback into the 2nd argument of setState .

For instance, we can write:

const promiseState = async state => new Promise(resolve => this.setState(state, resolve));

We created a promise with a async function that has resolve as the 2nd argument.

Then we can write:

promiseState({...})
  .then(() => promiseState({
    //...
  })
  .then(() => {
    //...
    return promiseState({
      //...
    });
  })
  .then(() => {
    //...
  });

Then we can call setState as many times as we want.

Add Fonts to create-react-app Based Projects

To add fonts to a create-react-app project, we can put it into the CSS code.

For instance, we can write:

@font-face {
  font-family: 'SomeFont';
  src: local('SomeFont'), url(./fonts/SomeFont.woff) format('woff');
}

in index.css .

Then we can import it by writing:

import './index.css';

We defined a new font with the font-face rule.

src has the location of the font.

font-family has the font name.

We can import CSS like a module with Webpack.

We can also put fonts in index.html .

For instance, we can write:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

or write:

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

Another solution is to use the webfontloader package.

To install it, we run:

yarn add webfontloader

or

npm install webfontloader --save

Then we can write:

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Open Sans:300,400,700', 'sans-serif']
   }
});

to load the font we want.

Conclusion

There are various ways to load fonts into our create-react-app project.

We can access component methods from outside a component by assigning a ref to it and then we can call the methods.

This applies to class components.

There are various ways to scroll to an element.

We can run setState in sequence if we pass in a function into the 2nd argument of it.