DEV Community: Kingsley onyelo

Understanding the useRef Hook in React A Comprehensive Guide

Kingsley onyelo — Wed, 28 Jun 2023 16:01:20 +0000

Hello again friends! In this article, I'm going to be explaining all you need to know about the useRef hooks. But before I go on, let me give a brief insight of what react hooks are.

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks: useState : To manage states. Returns a stateful value and an updater function to update it.

Alright now let's dive into the main topic, the useRef(initialValue) is a built-in React hook that accepts one argument as the starting value and returns a reference (aka ref). A reference is an object having a special property current .

import { useRef } from 'react';

function MyComponent() {
  const startingValue = 0;
  const reference = useRef(startingValue);

  const someHandler = () => {
    // Access reference value:
    const value = reference.current;

    // Update reference value:
    reference.current = newValue;
  };

  // ...
}

reference.current accesses the reference value, and reference.current = newValue updates the reference value. Pretty easy right?

The two things to remember about references:

1.The value of the reference is persisted (remains unchanged) between component re-renderings;

2.Updating a reference doesn't trigger a component re-rendering.
Now, let's see how to use useRef() in practice.

import { useRef } from 'react';

function LogButtonClicks() {
  const countRef = useRef(0);

  const handle = () => {
    countRef.current++;
    console.log(`Clicked ${countRef.current} times`);
  };

  console.log('I rendered!');

  return(
<>
<input type="text" ref = {countRef}/>
<button onClick={handle}>Click me</button>
</>

);
}

Using const countRef = useRef(0), a reference with the initial value of 0 is created.

At the point when the button is clicked, handle callback is summoned and the reference esteem is augmented: countRef.current++. After that, the console is logged with the reference value.

Refreshing the reference esteem countRef.current++ doesn't set off part re-delivering. "I rendered!" shows that this is the case. is logged to the console only once during initial rendering, and when the reference is updated, there is no re-rendering.

I hope this short explanation helps, thank you for reading

HOW THE PROVIDER DESIGN PATTERN

Kingsley onyelo — Sun, 25 Jun 2023 17:03:48 +0000

This article aims at showing you how to implement the provider design pattern. But first, you need to know what are the various design patterns used in building a react application.

There are about six design patterns commonly used when building a react application and they are;
1.Higher order component design pattern
2.State reducer design pattern
3.Render props component design pattern
4.Provider design pattern
5.Presentational and container component design pattern
6.Hooks design pattern

The most commonly used design pattern is Render props component, In some cases, we want to make data accessible to all or most application components. Even though we can use props to pass data to components, it can be hard if almost all of your application's components need access to the props' value.

When props are passed far down the component tree, we frequently experience what is known as prop drilling. It becomes nearly impossible to refactor the props-dependent code, and it is difficult to determine where particular data originates.

The Provider Pattern can be of assistance to us in this regard! We can make data available to multiple components using the Provider Pattern. We can wrap each component in a Provider rather than passing that data through props at each layer. The Context object gives us a Provider, a higher-order component. The createContext method that React provides allows us to create a Context object.

The Provider receives a value prop, which contains the data that we want to pass down. All components that are wrapped within this provider have access to the value of the value prop.

const DataContext = React.createContext()

function App() {
  const data = { ... }

  return (
    <div>
      <DataContext.Provider value={data}>
        <SideBar />
        <Content />
      </DataContext.Provider>
    </div>
  )
}

Here, we have eliminated the problem of passing data down to each component using props.

Each component can get access to the data, by using the useContext hook. This hook receives the context that data has a reference with, DataContext in this case. The useContext hook lets us read and write data to the context object.

function ListItem() {
  const { data } = React.useContext(DataContext);
  return <span>{data.listItem}</span>;
}

function Text() {
  const { data } = React.useContext(DataContext);
  return <h1>{data.text}</h1>;
}

function Header() {
  const { data } = React.useContext(DataContext);
  return <div>{data.title}</div>;
}

The Provider pattern is very useful for sharing global data. A common use case for the provider pattern is sharing a theme UI state with many components.

Thank you for reading.

HOW TO IMPLEMENT GOOGLE MAPS API IN YOUR EXPO REACT NATIVE PROJECT EASILY

Kingsley onyelo — Sat, 24 Jun 2023 10:07:37 +0000

In this article I am going to show you how you can easily integrate google maps in your expo react native project with just 3 libraries from google nom package.

What is Google Map?

Google Maps is a web service that provides detailed information about geographical regions and sites worldwide. In addition to conventional road maps, Google Maps offers aerial and satellite views of many locations. In some cities, Google Maps offers street views comprising photographs taken from vehicles.

If you're looking at building apps that are in the logistics, food delivery or ride hailing business, then having a google maps feature is highly needed for geolocation and tracking .

Now that we grasped what Google map is, let's get into the code proper.

First you want to start a new expo project using the command as follow;

npx create-expo-app GooglemapProject && cd GooglemapProject

Once your expo project is created cd into the project folder and run the command to start the project on your emulator or physical device.

Use the command to run your project on android emulator or physical device.

yarn android

This command will open the metro for the project, if you have a expo installed in your physical device, simply scan with your phone camera and viola! Your project will load in your device.

For ios device, se the command to run your project on android emulator or physical device.

yarn ios

This command will open the metro for the project, if you have a expo installed in your physical device, simply scan with your phone camera and viola! Your project will load in your device.

Okay! Now that we have our project running, let's begin implementing the google maps.

So to begin, we are going to using just 3 libraries from google npm package. Which are;

react-native-google-places-autocomplete
react-native-maps-directions
react-native-maps

so install these packages using yarn or npm

yarn add react-native-google-places-autocomplete react-native-maps-directions

Now that we have installed these packages, import the 2 packages into your app.js file as follow

import {
  StyleSheet,View,Dimensions,Text,TouchableOpacity,
} from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import MapViewDirections from "react-native-maps-directions";

Then are going to create a child component that will contain the GooglePlacesAutocomplete component. Let's the component InputAutoComplete

Inside this component we are using the GooglePlacesAutocomplete we imported to auto complete places which user type in the input,

function InputAutoComplete({ label, placeholder, onPlaceSelected }) {
  return (
    <>
      <Text>{label}</Text>
      <GooglePlacesAutocomplete
        placeholder={placeholder || ""}
        fetchDetails
        onPress={(data, details = null) => {

          onPlaceSelected(details);
        }}
        query={{
          key: "YOUR API KEY",
          language: "en",
        }}
      />
    </>
  );
}

The InputAutoComplete component accepts 3 props from the parent and they are label, placeholder, onPlaceSelected.

Alright!, now let's move over to the parent component and include the child component and also use the MapView import to show the UI for the map.

We are go to declare some constant which the MapView will require as initial region.

const { width, height } = Dimensions.get("window");
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.02;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const INITIAL_POSITION = {
  latitude: 40.76711,
  longitude: -73.979704,
  latitude_delta: LATITUDE_DELTA,
  longitude_delta: LONGITUDE_DELTA,
};

export default function App() {
  const [origin, setOrigin] = useState(null);
  const [destination, setDestination] = useState(null);
  const [showDirection, setShowDirection] = useState(false);
  const mapRef = useRef(null);

  const moveto = async (position) => {
    const camera = await mapRef.current?.getCamera();
    if (camera) {
      camera.center = position;
      mapRef.current?.animateCamera(camera, { duration: 1000 });
    }
  };

  const edgePaddingValue = 120;

  const edgePadding = {
    top: edgePaddingValue,
    right: edgePaddingValue,
    bottom: edgePaddingValue,
    left: edgePaddingValue,
  };

  const traceRoute = () => {
    if (origin && destination) {
      setShowDirection(true);
      mapRef.current?.fitToCoordinates([origin, destination], { edgePadding });
    }
  };
  const onPlaceSelected = (details, flag) => {
    const set = flag === "origin" ? setOrigin : setDestination;
    const position = {
      latitude: details?.geometry.location.lat || 0,
      longitude: details?.geometry.location.lng || 0,
    };
    set(position);
    moveto(position);
  };
  return (
    <View>
      <MapView
        ref={mapRef}
        provider={PROVIDER_GOOGLE}
        initialRegion={INITIAL_POSITION}
      >
        {origin && <Marker coordinate={origin} />}
        {destination && <Marker coordinate={destination} />}
        {origin && destination && showDirection && (
          <MapViewDirections
            origin={origin}
            destination={destination}
            apikey={"YOUR API KEY"}
            strokeColor="red"
            strokeWidth={4}
          />
        )}
      </MapView>
      <View>
        <InputAutoComplete
          label="Origin"
          onPlaceSelected={(details) => {
            onPlaceSelected(details, "origin");
          }}
        />
        <InputAutoComplete
          label="Destination"
          onPlaceSelected={(details) => {
            onPlaceSelected(details, "destination");
          }}
        />
        <TouchableOpacity onPress={() => traceRoute()}>
          <Text>Trace route</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

So we are wrapping all component with the MapView which takes 3 props.

In closing we created 2 InputAutoComplete that accepts the origin and destination address, which sets the input when onPress.

A Marker is set when the origin or destination position is set using setOrigin and setDestination in the onPlaceSelect function.

So let's run the project and see the result.

I hope I'm able to help with this article. Thank you.

WHY TYPESCRIPT IS BETTER THAN THAN USING JAVASCRIPT.

Kingsley onyelo — Sat, 24 Jun 2023 01:28:56 +0000

In this article we will learn why Typescript is better and more efficient to use than Javascript. I am going to highlight 3 main advantage Typescript has over Javascript;

Why TypeScript over JavaScript?

Due to its syntax, JavaScript code is not considered an error by TypeScript. This means that you don't need to worry about how the code is written because you can put any working JavaScript code into a TypeScript file.

Is JavaScript quicker than TypeScript?

TypeScript is more efficient and faster than JavaScript when it comes to execution speed and device scaling. The primary reason it outperforms JavaScript in terms of performance is that it is able to detect errors and bugs at the compilation stage rather than the runtime.

What benefits does the TypeScript function provide?

TypeScript's primary benefit is type checking. We will be able to identify many of these issues at build time if the language is given static typing. Before the code is shipped, they can be fixed.

WAYS OF USING TAILWIND CSS IN A REACT NATIVE PROJECT

Kingsley onyelo — Sat, 24 Jun 2023 01:22:38 +0000

This article aims at showing you how to use Tailwind CSS in React Native applications. But first, you need to know what Tailwind CSS is and how it can be helpful in developing good user interfaces.

What is Tailwind CSS?
A utility-first CSS framework composed of classes that can be put together to build user interface, directly in your HTML file. The best part of this framework is it doesn't impose any design guidelines to follow , which means you're not restricted for creating any design of your choice.

It is highly efficient and portable in size, Tailwind removes all unused CSS when building for production, it ships the smallest CSS bundle possible.

Now that we grasped what Tailwind is, let dive in to see how we define classes in our React App using JSX.

html
<button className="bg-blue-500 hover:bg-blue-700 
    text-white font-bold py-[5rem] px-4 rounded ml-4 mt-4">
  Button
</button>

Moving on, how can we use Tailwind CSS in React Native application?

NativeWind
It is a package that uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS Stylesheet on web and Stylesheet for native.

React Native's Stylesheet system only provides static styles, with other features left for the user to implement. By using NativeWind you can focus on writing your system instead of building your own custom style system.

Getting started

Project setup

To set up our project, we'll scaffold a new react Native app using react-native init. If you have already done this, skip this process, otherwise, run the command below:

js
npx react-native init my-nativewind-app

Cd into the project's directory.

js
cd my-nativewind-app

Install NativeWind

Install nativewind and it's peer dependency tailwindcss, using yarn or npm, but in this example I'll be using yarn instead.

js
yarn add nativewind
yarn add --dev tailwindcss

Set up Tailwind

Setup Tailwind CSS, run the command npx tailwindcss init to create a tailwind.config.js file

js
  // tailwind.config.js

  module.exports = {
  - content: [],
  + content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  };

Add Babel plugin

Add the Babel plugin, modify your babel.config.js.

js
  // babel.config.js
  module.exports = {
  - plugins: [],
  + plugins: ["nativewind/babel"],
  };

And that does it! Hurray you have Tailwind css working in your react native project.

js
  import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { Text, View } from 'react-native';

  export default function App() {
    return (
    <View className="flex-1 items-center justify-center bg-white">
        <Text className="text-gray-400 text-md font-bold mt-2">
            Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    );
  }

Thank you for taking the time read...