Forem: Waqas Khan

Mastering Parent-Child Communication with useImperativeHandle Hook in React

Waqas Khan — Tue, 18 Apr 2023 04:40:45 +0000

Intro:

In React, a parent component passes props down to a child component, and if the parent component needs to call a function defined in the child component, it typically must be defined in the parent component and then passed down. However, there is a way to break this rule using the useImperativeHandle hook.

The useImperativeHandle:

The useImperativeHandle hook is used to expose functions from a child component to a parent component. The useImperativeHandle hook takes a ref as its first argument, some handles as its second argument, and optional dependencies if any. useImperativeHandle returns undefined. It cannot be used alone and must be used with the useRef hook and the forwardRef component.

The useRef hook is used to create a reference to a DOM node or a value that persists across renders. The forwardRef component is used to pass the ref from the parent component to the child component.

Let's take a look at the basic syntax to understand all those jargon.

Basic Syntax:

useImperativeHandle(ref, createHandle, dependencies?)
// or 
useImperativeHandle(ref, () => {
    return {
      // ... your methods ...
    };
  }, []);

Examples:

Let's start better understanding by looking at the following diagram. The useRef hook was defined in the parent component and passed as props to the child component. In the child component, we access the ref and passed it down to useImperativeHandle. useImperativeHandle lets us customize the handle exposed as a ref. The createHandle is a function that takes no arguments and returns the ref handles we want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose. The forwardRef is used to expose any DOM node to the parent. To do that, wrap your component definition into forwardRef which will receive a ref as the second argument after props.

Parent Component:

import { useRef } from 'react';
import Modal from './Modal';
function App() {
  const modalRef = useRef();

  const handleOpenModal = () => {
    modalRef.current.openModal();
  }
  console.log('parent rendered')
  return (
    <main className="App">
      <p>Parent Component</p>
      <Modal ref={modalRef} />
      <button onClick={handleOpenModal}>Open</button>
    </main>
  );
}
export default App;

Child Component:

import { forwardRef, useImperativeHandle, useState } from "react";
const Modal = (props, ref) => {
    const [modalState, setModalState] = useState(false);
    useImperativeHandle(ref, () => ({
        openModal: () => setModalState(true)
    }));
    console.log('child rendered')
    if (!modalState) return null;
    return (
        <div className="modal">
            <p>This is my modal!</p>
            <button onClick={() => setModalState(false)}>Close</button>
        </div>
    )
}
export default forwardRef(Modal)

Best Practices:

Limit the number of exposed methods
useImperativeHandle should only be used when necessary. In most cases, it's better to use props and callbacks to communicate between parent and child components.
Avoid circular dependencies: useImperativeHandle can create circular dependencies between parent and child components.
Consider using TypeScript.

Conclusion:
The useImperativeHandle hook allows you to call a function defined in the child component from the parent component, breaking the typical rule of defining functions in the parent component and passing them down. This hook, used in conjunction with the useRef hook and the forwardRef component, gives you greater flexibility and control over your components.

Thank you for taking the time to read this blog. I hope it has been informative and has helped you gain a deeper understanding of the topic. If you have any feedback or suggestions for future content, please let me know!

HTML Tags: Most Beginner does not know (Part 3)

Waqas Khan — Thu, 18 Aug 2022 17:12:00 +0000

In process of learning HTML basics, every beginner knows dev tag, h1 to h6 tags, p tags and few more, but most of the beginner does not know about details tags, table tags and many more like this because he/she thinks its high-level things but its not. Believe me its that easy as h1 and p tags. Let break down these tags...

1) Base tag:

Use:

It is use when you add some assets in your site from same site again and again then the basic URL is placed in base tag and remaining part of that URL is placed where required.
let me show how and what I meant by that:

Without Base tag 👇

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <img src="https://cutt.ly/XXvfnhj" alt="Smoke-image">
    <img src="https://cutt.ly/wXvfO3U" alt="Red leaves on Floor">
    <img src="https://cutt.ly/VXvfZNl" alt="Sky with Stars">
    <img src="https://cutt.ly/vXvgeBw" alt="A paint">
</body>
</html>

If you notice I have place 4 images from same site and I am repeatedly using that site. So why not to common this "https://cutt.ly" site, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://cutt.ly" target="_blank">
</head>
<body>
    <img src="/XXvfnhj" alt="">
    <img src="/wXvfO3U" alt="">
    <img src="/VXvfZNl" alt="">
    <img src="/vXvgeBw" alt="Jungle">
</body>
</html>

And its not only limit to img tags, it can be use anywhere that is in anchor tags, as links, refences etc. That's it.
Let’s jump to the Table tag.

2) Table tag:

Table tag is answer to this question-> How to make tables on web using HTML? So, with table tags we can basically make tables.

Basic Syntax:

    <table>
        <caption></caption>
        <tr> 
            <th>Colum 1 title</th>
            <th>Colum 2 title</th>
        </tr>
        <tr>
            <td>Colum 1 data</td>
            <td>Colum 2 title</td>
        </tr>        
    </table>

Bear with me I am going to explain everything. let’s break down its syntax:

table tag-> define that it is a table
caption tag-> define the main title of the table.
tr tag -> mean Table Row.
th tag -> mean table header, actually table column header.
td tag -> table data.

Keep these short words in mind it will work for you.

Now let’s understand it with an example.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
        table{
            width: 500px;
            text-align: center;
        }
    </style>
</head>

<body>

    <table> <!-- Table  -->
        <caption>This main title of the table</caption> <!-- Table Title-->
        <tr> <!-- Table Row -->
            <th>Items</th> <!-- Table header -->
            <th>Price</th>
        </tr>
        <tr> 
            <td>Jacket</td> <!-- Table data-->
            <td>$100</td>
        </tr>
        <tr>
            <td>Suit</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>Trouser</td>
            <td>$45</td>
        </tr>
    </table>

</body>
</html>

Output:

if you don't understand, copy the code, paste it in VS code and open it with live server. Change some values and you will understand what is going on.

3) Datalist Tag:

Use: Datalist tag use where a user has to choose some options for input field. OR developer want to provide some pre-set data for the user to choose.

Basic Syntax:

  <datalist>
    <option value="data 1">
    <option value="data 2">
  </datalist>

Datalist tag contains some options to provide and all those options remains in whole datalist tag. I have provided an example below I tried to shortened as much as I can.

Example:

<!DOCTYPE html>
<html lang="en">
<body>  
    <h3>Choose what you like the most</h3>
  <input list="connect-with-datalist"> 
  <datalist id="connect-with-datalist"> <!-- list and Id should be same to connect them both -->
    <option value="HTML">
    <option value="CSS">
    <option value="Javascript">
    <option value="React Js">
     <option value="All"></option>
  </datalist>

  <button>Submit</button>
</body>
</html>

Output:

OMG you have learn a lot today. I will say start using it in you HTML.

Learn Little but Better!

If you have found this helpful please give a like and comment.

Thanks

HTML Audio Explained!

Waqas Khan — Mon, 15 Aug 2022 12:58:19 +0000

Usage of Audio Tag:

The audio tag is used to play sounds, like songs, podcasts or any other type of audio streams. With HTML audio Tag you can embed audio file on your website.

Real Example:

The following image show us some collection of audio files.

Let learn its essentials elements to start using it in our HTML.

Basic syntax:

<audio controls autoplay loop muted>
    <source src="Aarzu.mp3" type="audio/mpeg">
    <source src="Safna.mp3" type="audio/ogg">
    Your browser does not support Audio
</audio>

You don't have to worry I will explain everything one by one.

Still after reading the whole blog everything looks confuse. Just follow the basic syntax and you are good to go.

Tags:

Basic tags used are:

Audio Tag: <audio blah blah blah ></audio>

The audio tags tell compiler that its an audio file.
Audio tags has both open and closing tags.

Source Tag: <source blah blah>

It defines one file at a time with file source and its types (explained below). We can define as many files as we want just like I have defined two in this case.

Audio Tag Attributes:

Following attributes are used inside HTML audio Tag.

Control Attribute: <audio controls ></audio>

It specifies that this audio should have audio controlling options like pause and play icon/speaker icon etc.
Automatic Play Attribute: <audio controls autoplay ></audio>

This specify that the audio start playing as the page loads. Autoplay mean automatic play.
Repeated Play Attribute: <audio controls autoplay loop></audio>

The audios will play again and again when it ends.
Silent Mode Attribute: <audio controls autoplay loop muted></audio>

With this attribute the audio will be muted when the page loads and you have to manually unmute it.
Preload Attribute: <audio preload="auto/metadata/none" ></audio>

Preload attribute give us an option how did we want to LOAD the audio.
- preload="auto" => Load entire file when page load.
- preload="metadata" =>Load only metadata when page loads
- preload="none" => load nothing.

*Important Note: * The preload attribute is ignored if autoplay is present.

Wrong: <audio controls autoplay preload="auto" loop muted></audio>

Correct: <audio controls preload="auto" loop muted></audio>

Source Tag Attributes:

src="file location"
SRC mean source of the file, like where is this file located. It can be a link or a directory path.

type=mpeg/wav/ogg There are three supported audio formats for HTML audio Tag that have different MIME type values.

Mp3 -> audio/mpeg
Wav -> audio/wav
OGG -> audio/ogg

Don't worry about MIME now. Just know that it has 3 types.

What About the Text Inside Audio Tag?

Well the text will not display until the browser does not support audio.

Thanks for reading. Give it a Like, Comment and Share it.
Learn Little but Better

HTML tags: Most beginner does not Know( Part 1)

Waqas Khan — Mon, 15 Aug 2022 10:15:00 +0000

Lets explore some HTML tags to understand the HTML better and use it properly for the next time.

Using appropriate HTML tags at appropriate location is important.
lets learn few tags today!! (learn little but better)

1) HTML abbr Tag

abbr mean abbreviation and it actually use for the Acronym like the world NASA which mean National Aeronautics and Space Administration. OMG this long phrase is difficult to read. so we use abbr tag in HTML body to identify something and when user hover over the mouse, a small explanation or full abbreviation will appear.

Syntax:

<abbr title= "Full form">Acronym</abbr>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>abbr taf</title>
</head>
<body>
    <p> 
        This is 
        <abbr title="National Aeronautics and Space Administration">
            NASA
        </abbr>
     </p>
</body> 
</html>

2) HTML map and area Tag

map tag is use to make different areas of an image clickable and link those parts to some souces.

But for map we need to understand area tag.

map tag make image clickable

area tag define shape, coordinates and source of that clickable area.

e.g: Look at below image. What if I want to make each planet clickable. I can only do this by map tag.

How?

By defining the cordinates of pixals and a links inside area tags and wrap those area tag around map tag. lets have a look at the code:

<img src="solar.png" usemap="#planetmap">
    <!-- comment=> usemap connect image with map tag, ignor for now-->
    <map name="planetmap">
        <area 
            coords="0,0,82,126" 
            href="https://bit.ly/3pgWtiK"   
            alt="sun"  >
    </map>

solar.png:

3) HTML aside tag

Aside tag is use to display text as the column/side bar text.

syntax:

<aside> Your Text here </aside>

Thanks for reading.

Learn Little but Better

Forem: Waqas Khan

Mastering Parent-Child Communication with useImperativeHandle Hook in React

Intro:

The useImperativeHandle:

Basic Syntax:

Examples:

HTML Tags: Most Beginner does not know (Part 3)

1) Base tag:

Use:

2) Table tag:

Basic Syntax:

Output:

3) Datalist Tag:

Basic Syntax:

Example:

Output:

HTML Audio Explained!

Usage of Audio Tag:

Real Example:

Basic syntax:

Tags:

Audio Tag Attributes:

Control Attribute: `<audio controls ></audio>`

Automatic Play Attribute: `<audio controls autoplay ></audio>`

Repeated Play Attribute: `<audio controls autoplay loop></audio>`

Silent Mode Attribute: `<audio controls autoplay loop muted></audio>`

Preload Attribute: `<audio preload="auto/metadata/none" ></audio>`

Source Tag Attributes:

What About the Text Inside Audio Tag?

HTML tags: Most beginner does not Know( Part 1)

1) HTML abbr Tag

2) HTML map and area Tag

3) HTML aside tag

Forem: Waqas Khan

Mastering Parent-Child Communication with useImperativeHandle Hook in React

Intro:

The useImperativeHandle:

Basic Syntax:

Examples:

HTML Tags: Most Beginner does not know (Part 3)

1) Base tag:

Use:

2) Table tag:

Basic Syntax:

Output:

3) Datalist Tag:

Basic Syntax:

Example:

Output:

HTML Audio Explained!

Usage of Audio Tag:

Real Example:

Basic syntax:

Tags:

Audio Tag Attributes:

Control Attribute: <audio controls ></audio>

Automatic Play Attribute: <audio controls autoplay ></audio>

Repeated Play Attribute: <audio controls autoplay loop></audio>

Silent Mode Attribute: <audio controls autoplay loop muted></audio>

Preload Attribute: <audio preload="auto/metadata/none" ></audio>

Source Tag Attributes:

What About the Text Inside Audio Tag?

HTML tags: Most beginner does not Know( Part 1)

1) HTML abbr Tag

2) HTML map and area Tag

3) HTML aside tag

Control Attribute: `<audio controls ></audio>`

Automatic Play Attribute: `<audio controls autoplay ></audio>`

Repeated Play Attribute: `<audio controls autoplay loop></audio>`

Silent Mode Attribute: `<audio controls autoplay loop muted></audio>`

Preload Attribute: `<audio preload="auto/metadata/none" ></audio>`