React Tips — Titles, Default Props, and Hooks with Function Components

Image for post
Image for post
Photo by Florencia Potter on Unsplash

React is a popular library for creating web apps and mobile apps.

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

Render New React Component on Click

We can render a new React component on click if we set a state so that the component can be rendered.

For example, we can write:

We have a button that runs the this.onClick method on click.

It changes the showComponent state to true .

Then we can make the Foo component show when this.state.showComponent is true .

Keep document.title Updated in a React App

To make updating the title of a React app easy, we can use the react-document-title package to do it.

To install it, we run:

Then we can use it by writing:

Then ‘My App’ will be the title of our React app.

When we switch components, we can switch the title of the document.

For instance, we can write:

We just wrap our component with the DocumentTitle component to set the title.

It also works with class components:

We can make the state dynamic by passing in the state variable into the title prop.

It also works with server-side rendered apps.

There’s also the react-helmet plugin which lets us set the page title and more.

To set the title with it, we use the Helmet component with the title element inside.

For instance, we can write:

We can use it to add any element we can add in the head tag, including the title tag.

It also works with both client and server-side rendered apps.

Use React Hooks in a React Classic `class` Component

To use gooks in a class component, we can create a functional component that’s used as a higher-order component.

For instance, we can write:

We used our useSomeHook hook in our withHook component.

Then we pass the hooks’s output value into the Component , which can be any component, including a class component.

Then we can use it by writing:

We passed in Foo into our withHook higher-order component so that we can use our hook in the withHook HOC.

Call External Javascript Function from React Components

We can call external JavaScript functions from React components.

If we have something like:

Then we created a global function that we can call in our React components.

Inside it, we write:

Default Prop is not Used when null is Passed

Default props are only set when undefined or nothing is passed in as the value of the prop.

Therefore, if we want to set the default prop value when null is set, we can write:

If count is falsy, and null is falsy, we’ll pass in undefined as the value of count .

Therefore, the default prop value will be set.

Image for post
Image for post
Photo by Philip Macias on Unsplash

Conclusion

We can render a new component on click if we set a state to make the component render.

document.title can be updated with plain JavaScript or with a package.

We can create higher-order components with hooks if we want to use hooks with a class component.

Default props are only set if the prop is undefined .

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store