The Concept of Database Normalization

Anthony .H — Tue, 21 Dec 2021 03:45:55 +0000

1. What is data redundancy?

Data redundancy is a repetition of data increases the size of database. It creates the issues such as insert, delete and update the data.

Insertion Anomaly is adding redundant data for every new row. For example, every time we want to add a new employee, we have to repeat the department's data (Dept., Head of Dept., Phone Number). If we add 100 more employees, it will insert redundant data for every new row.
Deletion Anomaly is a lost related dataset when some other dataset is deleted. For instance, when we delete the employee row, we also delete the department's data simultaneously. Until we reach the last row, we lose the department dataset entirely.
Update Anomaly when the finance department head resigns, we need to update a new department head information. We have to update every single row where Dept. is finance.

2. How Normalization will solve the issues?

Normalization is a technique of organizing the data into multiple related tables to minimize data redundancy.
We break the above Employee table into two new different tables and name Employee table and Dept. table.
1. Employee table will contain employees information.

2. Dept. table will contain Dept. information.

Solving Data Anomaly
1. When we insert a new employee, We do not eliminate the data redundancy. However, we minimize it by only adding which department the employee works.
2. When we delete employees data, it will not affect the department dataset.
3. When we have a new department head, we just need to update department table. It will not affect the employee table.
Normalization resolve the problems by dividing the data into separated independent entities and relating them using a key or a unique name (in this case is Dept.). Less redundancy means fewer problems in inserting, deleting and updating the data.

3. Type of Normalization

There are three basics normal forms in data normalization.
1. 1st Normal Form.
2. 2nd Normal Form.
3. 3rd Normal Form.
BCNF is an advance normalization technique

React.js: Basic React Hooks.

Anthony .H — Mon, 06 Dec 2021 07:40:30 +0000

Introduction

There is no doubt that React.js is the most popular JavaScript library for building user interfaces. React.js was developed at Facebook in 2011 and became popular since it provides tons of functionalities to help developers not repeat the code. React.js is based on reusable component classes whose primary purpose is to be fast, scalable, and simple to use. With the new update React 16.8 introduction of hooks. It is a game-changer because it is easier to write and debug.

Basic Hooks

Every React component has three primary phases of lifecycle: mounting, updating and unmounting. Hooks is a state variable that can update those states in its component. We will discuss the basic Hooks and their use cases.

Rule of thumb to use Hooks.

Only call Hooks at the top level.
Only use Hooks from React functions(Components)

1. useState

useState is a Hooks that can update each lifecycle phase in Component.

Declare a State variable
Reading State
Updating State

In this example, I will create React.js that can increment by two each time when a user clicks the button and reset to 0 using useState Hook

import React,{useState} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  return(
    <div>
      <p>{counter}</p>
      <button onClick={(()=> setCounter(counter+2))}>Counter </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>      
  )
}

export default App;

The app can update the counter and reset to 0 without loading the page. That is the beauty of React. Everything updates in the backend of React components asynchronously.

2. useEffect

useEffect is a hook that run every time the page render. It can take a function as an argument and the condition to fire an effect.

In this example, I will useEffect and fire only one time when the page render


import React,{useState,useEffect} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  useEffect(() => {
    console.log('Render')
  },[])

  return(
    <>
    <div>
      <button onClick={(()=> setCounter(counter+1))}>Increment 1 </button>
      <button onClick={(()=> setCounter(counter+2))}>Increment 2 </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>   

    <h2>{counter}</h2>
    </>   
  )
}

export default App;

When a user clicks any button, the useEffect never fires because of the firing condition set to empty array.

In the following example, I will set the firing condition to useState variable. Every time the buttons click, it will fire the useEffect.

import React,{useState,useEffect} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  useEffect(() => {
    console.log('Render')
  },[counter])

  return(
    <>
    <div>
      <button onClick={(()=> setCounter(counter+1))}>Increment 1 </button>
      <button onClick={(()=> setCounter(counter+2))}>Increment 2 </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>   

    <h2>{counter}</h2>
    </>   
  )
}

export default App;

The above example, useEffect fires whenever a user clicks on the Increment 1 button and the Increment 2 button because of counter value changes. However, if a user clicks on the reset button, it will stop firing useEffect because the counter is always set to zero.

Conclusion

React Hooks provide many benefits include reusability, readability, and testability. However, useEffect can cause unnecessary rendering or even infinity rendering if placed in the loop callback functions.

Forem: Anthony .H