React on dev notes

How to implement useMediaQuery hook in React

Sun, 13 Mar 2022 00:00:00 +0000

What are Media Queries?

Media Queries are a CSS feature that can be used to conditionally apply selected styles on an HTML element. Some examples of media queries include checking for the width of the browser window, checking for the media type (print, screen), or checking for dark/light mode preference.

The most common use case for media queries is using it to implement responsivity on a website. Checking for the width of the viewport and applying styles based on it allows us to define different styles on different devices (desktop, mobile, tablet).

Basics of React server-side rendering with Express.js

Sat, 05 Feb 2022 00:00:00 +0000

If you want to develop SEO friendly and fast websites with React, you have two choices: server-side rendering (SSR) or static site generation (SSG).

There are some awesome frameworks like remix.run , next.js, astro or 11ty, which allow you to use one of (or both) techniques. So if you’re building a production app, I recommend using one of them because server-side rendering is quite hard to get right.

But if you want to understand how it works and what is happening under the hood in these frameworks, you definately should try it out. This article will focus on how SSR works and we will also go through a simple example of using SSR.

Should you use React.FC to type your components?

Tue, 07 Dec 2021 00:00:00 +0000

TLDR: No. You should probably not.

const Dialog: React.FC = ({children}) => {
	return (
		...
	)
}

The consensus in the React community now seems to be that, you should avoid using React.FC because it causes the component to implicitly take children. This means the component will accept children, even if they’re not supposed to.

Let’s take a look at the pros and cons of React.FC.

Pros of React.FC

Excplicit return type

In addition to the children prop, React.FC declares an explicit return type for the component. The return type is ReactElement | null; and we will get a type error if we try to return something else from the component.

Use useReducer to manage complex state

Sat, 31 Oct 2020 00:00:00 +0000

useReducer is a React Hook which helps you manage complex state with a simple API. The hook takes a reducer function and the initial state as parameters. You can also pass in an optional argument which can be a function for lazy initialization of the state.

Here’s the simplest example of using useReducer you can think of.

import React from "react";

function reducer(value, newValue) {
  return newValue;
}

export default function App() {
  const [value, setValue] = React.useReducer(reducer, 0);
  return (
    <div className="App">
      <h1>{value}</h1>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

We are using useReducer for managing a single value, like when we use useState. But useReducer can do much more than that!

Manage React state with the useContext hook

Wed, 14 Oct 2020 00:00:00 +0000

DISCLAIMER: This post is based on state management ideas presented by Kent C. Dodd’s in Application state management with React. If you haven’t read it, I encourage you to do so.

React projects have many options for managing state. While libraries like redux and mobx are a popular choice, React also has it’s own API for managing state. The Context API is useful when you have state which is accessed in multiple places in your app and you want to avoid prop drilling.

Make custom marker displaying users location and direction with react-native-maps on iOS

Wed, 30 Sep 2020 00:00:00 +0000

NOTICE: This post is about showing a custom location and direction indicator with react-native-maps on iOS. This involves a hack which probably isn’t needed on Android. On Android rotation works just by adding the rotationprop to the Marker and setting it to the current heading. As far as I know this hack is only required for iOS.

If you want to display the current GPS location with your own custom graphics in React Native Maps, you need to create a custom Marker. This is done fairly easily, since the Marker component accepts a View as child.

What is React Strict Mode?

Sat, 26 Sep 2020 00:00:00 +0000

React Strict Mode is a tool, which comes with React, for detecting possible issues and problems in your application. Currently (Sept. 2020) Strict Mode detects if you have unsafe lifecycle methods, usage of legacy string ref API, usage of findDOMNode, detecting unexpected side effects or detecting usage of legacy context API.

So basically, using Strict Mode will help you detect if your app or libraries are using React APIs which are deprecated, unsafe in async code or have problems which might cause bugs. Strict Mode warnings are only displayed in development, so you don’t have to worry about them showing up in production. In the future, Strict Mode will likely add other warnings so even if you don’t have any now, it’s a good idea to keep using it.

Access DOM element in a child component in React

Tue, 18 Aug 2020 06:45:01 +0000

Sometimes we need access a DOM element which is contained by another React component. If we try to just use ref and pass it to the child component, we get an error.

function ChildComponent(props) {
  return <div ref={props.ref}>Hello there!</div>;
}

export default function App() {
  const childRef = React.useRef();

  return (
    <div className="App">
      <ChildComponent ref={childRef} />
    </div>
  );
}

This is because ref is a reserved prop name so you can’t pass it to a child component. Instead we can use forwardRef when defining the child component.

Create a React Hook to show browser online status

Sun, 31 May 2020 09:33:01 +0000

React Hooks are a way of adding logic to your functional components in an simple and elegant way. In addition to the standard hooks like useState or useEffect you can also create your own hooks if find you need the same logic in multiple components.

A custom hook is nothing more than a JavaScript function which starts with “use” and that may call other hooks. In this article I will show you how to create a simple hook for showing the network status of the users browser.

Making API calls in React useEffect

Sat, 16 May 2020 09:33:01 +0000

useEffect is a hook added in React 16.8. It allows you to perform side effects in function components. This means you can update things outside of React based on your propsand state. Fetching data when the component state changes, changing the page <title> or connecting to a WebSocket server are all examples of side effects that can be done with useEffect.

As an example, we are going to build a component which fetches data from Cat Facts API and displays the received facts as a list. Finally we’ll add buttons to select the animal we want facts about.

The very basics of React Hooks

Mon, 27 Apr 2020 09:33:01 +0000

Hooks are an React API that were introduced in React 16.8 a little more than a year ago (february 2019). They let you use state in your React components without writing classes.

In this post I’ll talk about the useState hook and after reading it you’ll have a basic idea how to use it to add state to your functional components.

Let’s start with a simple functional component.


import React from "react";
function Cat() {
  return (
    <span>
      🐱
    </span>
  );
}

Here we are simply rendering a cat emoji inside a humble span element.