Forem: Ridha Mezrigui

React: the reconciliation algorithm

Ridha Mezrigui — Sun, 12 Feb 2023 15:39:48 +0000

One of the key features of React is its reconciliation algorithm, which determines how the library updates the DOM in response to changes in the component state.
In this blog post, we will explore the reconciliation algorithm in depth and see how it works with examples.

What is the reconciliation algorithm?

The reconciliation algorithm is the process React uses to update the DOM in response to changes in the component state. When a component’s state changes, React will re-render the component and its children. The reconciliation algorithm is responsible for determining what has changed in the component tree and updating the DOM accordingly.

React uses a virtual DOM (VDOM) to represent the structure of the components in memory.The virtual DOM is a lightweight in-memory representation of the DOM, and it's used by React to compare the new state of the component tree with the previous state.
If there are any differences, React will update the real DOM to match the new state.

How does the reconciliation algorithm work?

The reconciliation algorithm starts by comparing the virtual DOM of the previous state with the virtual DOM of the new state.
If there are no differences, React will not make any changes to the real DOM. If there are differences, React will update the real DOM to match the new state.

React uses a heuristic approach to determine the most efficient way to update the real DOM. The algorithm first checks if a component has changed its type, for example, from a simple text component to a complex component with multiple children. If the component type has changed, React will unmount the old component and mount the new component.

If the component type has not changed, React will compare the properties of the old and new components. If the properties have changed, React will update the properties of the real DOM element. If the children of the component have changed, React will recursively apply the reconciliation algorithm to the children components.

React also uses a technique called reusing existing DOM nodes to make the updates more efficient. If a component has not changed its type and its properties have not changed, React will reuse the existing DOM node for that component. This allows React to avoid unnecessary DOM updates and makes the updates faster.

Example

Let's take an example to understand the reconciliation algorithm in action:

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('mz1');

  return (
    <>
      <h1>Hello, {name}</h1>
      <button onClick={() => setName('mz2')}>Change Name</button>
    </>
  );
}

export default Greeting;

In this example, when the button is clicked and the name state changes, React will run the reconciliation algorithm to update the real DOM to match the new state.

React will start by comparing the virtual DOM of the previous state with the virtual DOM of the new state.
Since the component type has not changed, React will reuse the existing DOM node for the Greeting component, then it will update the text content of the h1 element to match the new name mz2.

In this example, the reconciliation algorithm has made a single DOM update to change the text content of the h1 element.

Optimizing the performance using Keys

In React, the use of keys is important when rendering a list of elements. Keys are a special string attribute that you can provide to elements in a list to help React keep track of which items are added, deleted, or changed.

Consider the following example of a list of names:

import React from 'react';

function NamesList({ names }) {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

export default NamesList;

In this example, we're using the map function to render a list of li elements, each with a name from the names array. If the names array changes, React will use the reconciliation algorithm to update the DOM to match the new virtual DOM.

However, without the use of keys, React has no way of knowing which items have been added, deleted, or changed. As a result, React may end up unnecessarily recreating all of the li elements, even if only a single name has changed. This can lead to decreased performance, especially for long lists.

By providing a unique key to each li element, React can track which items have changed and make the minimum number of DOM updates necessary. In the example above, we're using the name itself as the key, which is a unique identifier for each item in the list.

It's important to note that the value of the key should be unique among the siblings, but doesn't have to be globally unique. It's also not recommended to use indexes as keys, because they can lead to unexpected behavior when items are reordered or deleted.

Conclusion

The "diff algorithm" and the "reconciliation algorithm" are often used interchangeably to refer to the same thing in the context of React. However, there is a subtle difference between the two terms.

The diff algorithm refers to the process of comparing two trees of nodes, such as the virtual DOM trees in React, to determine the differences between them. The diff algorithm determines the minimum number of operations required to transform one tree into another.

The reconciliation algorithm refers to the overall process of updating the DOM in response to changes in the component state. The reconciliation algorithm includes the diff algorithm as one of its steps, but it also includes additional steps such as unmounting and mounting components, updating component properties, and handling error cases.

React.js: The one way and the opposite way data flow

Ridha Mezrigui — Sat, 15 Jan 2022 21:14:44 +0000

Introduction

The one way and the opposite way data flow are two important concepts you need to understand as a react developer, also they are two interview questions that often ask.

The one way data flow

As you know in react we use state to store data in a specific component and if this component has children we pass the state from the parent component to the child component as props.
The concept of passing props is called one way data flow or uni-directional data flow because the props or data can only flow from the top to the bottom, means from the parent to the child.

The opposite way data flow

The opposite way data flow is about passing props from child to parent.

When it comes to this concept, react doesn't provide us a shorthand syntax for handling opposite data flow.
That's because we can't pass props from a child component to a parent component, but we can implement it in our selves.

The opposite way data flow implementation

Let's start by creating a simple parent component contains :

A search state
A handle change function
A function to get the result of the search value from an API
A button to call the function

function Search() {
  const [search, setSearch] = useState('')

 //handle change
  const handleChange = e => setSearch(e.target.value)

 // get the result search from server
  const getTheSearchResult = () => {
    console.log(search)
  }

  return (
    <div className="App">
    <button onClick={getTheResultSearch}>Get the result</button>
    </div>
  );
}

The search input will exist in a separate component called SearchInput.

export function SearchInput() {
  const [search, setSearch] = useState('')

  //handle change
  const handleChange = e => setSearch(e.target.value)
  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Combine the two components :

Search : the parent
SearchInput : the child

 <div className="App">
      <SearchInput/> <br/>
     <button onClick={getTheResultSearch}>Get the result</button>
 </div>

With tis implementation we will get nothing in the console when we click the button.
That's because when we type in the search input the search state that exists in the SearchInput component will change not the one that exists in the Search component.

Now we are stack because there is no way to pass the state exists in the child to the parent.

To handle this situation, we need to remove the state and the handleChange from the SearchInput and pass them as props from the Serach component.

Refactor the SearchInput component

export function SearchInput({search, handleChange}) {

  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}

Refactor the Search component

<div className="App">
      <SearchInput search={search} onChange={handleChange}/>
     <button onClick={getTheResultSearch}>Get the result</button>
    </div>

Result

Now, when we type in the search input, the value pass as props to the Search component via the handleChange.
It means that the data flows in the opposite way.

Conclusion

This is all about the one way and the opposite way data flow, I hope you enjoyed ❤️.

React.js : debouncing and throttling

Ridha Mezrigui — Sat, 08 Jan 2022 23:04:44 +0000

Introduction

In order to build a professional web application, optimization and performance are two important things you need to care about.

There are many tips and techniques used to increase the performance of a web application, such as Debouncing and Throttling.

When it comes to debouncing and throttling, developers often confuse.

During this blog, I will go throw these two techniques in details using react.js, but it is the same principle for vanilla JavaScript or any other JavaScript framework.

Debouncing

Before dive deep into debouncing, let's see a simple and normal example that implement a search box that allows users to search something without clicking any button.

function App() {

  const handleChange = e => {
    console.log('api call...')
  }

  return (
    <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={handleChange} />
      </header>
    </div>
  );
}

The issue is that handleChange is very expensive, and this is bad to the server because it will receive many HTTP requests in the same time.

To solve the problem, we need to use a debounce function.

Definition and implementation of a debounce function

A debounce function is called after a specific amount of time passes since its last call.

function debounce(fn, delay) {
    let timer
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(()=>fn(...args), delay)
    }

The idea is to define a high-order function called debounce takes as arguments a callback function and a delay in ms, then returns a new function that sets the timer to execute the callback after the timer done.
The secret here is that every call of the function returned from the debounce function will cancel the previous timer using cleartimeout(timer) and start a new timer.
With this approach, we can be sure that the callback function will be executed just once after the time that we passed as an argument in the last call.

Implement debounce function into our example

 <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={debounce(handleChange, 500)} />
      </header>
    </div>

Result

Throttling

Let's assume that we have an event listener in our app to track the movement of the user mouse, then send data to a backend server to do some operations based on the location of the mouse.

const handleMouseMove = e => {
      //everytime the mouse moved this function will be invoked
      console.log('api call to do some operations...')
  }
 //event listener to track the movement of the mouse
  window.addEventListener('mousemove',handleMouseMove)

If we stick with this solution, we will end up with a down backend server because it will receive a hundred of requests in short duration.

1600 API calls in few seconds is very very bad 📛📛📛.
To fix this issue, we need to limit the number of API calls, and this kind of problems can be solved using a throttle function.

Definition and implementation of a throttle function

A throttle function is a mechanism to limit the number of calls of another function in a specific interval, any additional calls within the specified time interval will be ignored.

function throttle(fn, delay) {
    let run = false
    return function (...args) {
      if (!run) {
        fn(...args)
        run = true
        setTimeout( () => run = false, delay)
      }
    }
  }

The throttle function accepts two arguments: fn, which is a function to throttle, and delay in ms of the throttling interval and returns a throttled function.

Implement throttle function into our example

const handleMouseMove = e => {
      //everytime the mouse moved this function will be invoked
      console.log('api call to do some operations...')
  }

  //event listener to track the movement of the mouse
  window.addEventListener('mousemove', throttle(handleMouseMove, 1000))
//1000ms => 1 second

Result

Conclusion

Debouncing and Throttling are two amazing techniques, they can increase the performance of your web application to another level.
Choosing one of them depends on the case.

GitHub repo: https://github.com/ridhamz/debouncing-throttling

Node.js : REST API part 2

Ridha Mezrigui — Mon, 19 Oct 2020 19:35:17 +0000

Hello community,

in this part we will finish our REST API, if you didn't see the first part you can check it from here.

Let's get started

entire this part we'll cover :

create new movie
get movie by ID
get all movies
update movie
delete movie
finally we will talk about middleware concept and how to build and implement it in our API

first we need to create a movie model, so in the models folder we create a file called movie-model.js :

//movie-model.js
const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String, required: true},
  creator: { type: String, required: true }
});

module.exports = mongoose.model('Movie', userSchema);

now is the time to create the movie controller in the controllers folder, we create a movie-controller.js file :

//movie-controller.js
const { validationResult } = require('express-validator');
const ObjectId = require('mongoose').Types.ObjectId;
const User = require('../models/user-model');
const Movie = require('../models/movie-model');

// CREATE MOVIE 
const createMovie = async (req, res) => {};

// GET MOVIE BY ID 
const getMovieById = async (req, res) => {};

// GET ALL MOVIES 
const getAllMovies = async (req, res) => {};

// UPDATE MOVIE 
const updateMovie = async (req, res) => {};

// DELETE MOVIE 
const deleteMovie = async (req, res) => {};

module.exports = {
    createMovie,
    getMovieById,
    getAllMovies,
    updateMovie,
    deleteMovie
};

don't worry we will take these functions one by one later now we need to set up movie routes we create movie-routes.js in routes folder :

//movie-routes.js
const { check } = require('express-validator');
const movieController = require('../controllers/movie-controller');
const express = require('express');
const router = express.Router();

const {
    createMovie,
    getMovieById,
    getAllMovies,
    updateMovie,
    deleteMovie } = movieController;

const validation = [ 
    check('title').not().isEmpty(),
     check('description').not().isEmpty(),
     check('creator').not().isEmpty()]

// CREATE MOVIE 
router.post('/',validation,createMovie);

// GET MOVIE BY ID 
router.get('/:id',getMovieById);

// GET ALL MOVIES
router.get('/',getAllMovies);

// UPDATE MOVIE 
router.patch('/:id',validation,updateMovie);

// DELETE MOVIE 
router.delete('/:id',deleteMovie);

module.exports = router;

the last thing we need to do before we dive into movie-controller.js functions is to add movie-routes in the index.js file :

//index.js
const movieRoutes = require('./routes/movie-routes'); 

app.use('/api/movie', movieRoutes);

now let's get started with the first function createMovie :

// CREATE MOVIE 
const createMovie = async (req, res) => {

      const errors = validationResult(req);
      if (!errors.isEmpty()) 
         return res.status(400).json({ errors: errors.array() });

      const { title, description, creator } = req.body;
      let  existingUser = await User.findOne({ _id: creator });
      if (!existingUser)
         return res.status(400).json({error : 'invalid user'});

      const movie = new Movie({
          title,
          description,
          creator
      });

      try {
          await movie.save();
          res.status(200).json({
          message: "movie created successfully",
          movie: movie
        })
      } catch (error) {
           res.status(500).json(error.message);
      }
};

Let me explain the logic first we check the data validation result if some validation failed we return an error otherwise we take the all data title, description and creator = user id if there is no user with this ID also we return an error finally we create the movie object and save it in the database then return a json object contains successfully message and the movie created.

getMovieById :

// GET MOVIE BY ID 
const getMovieById = async (req, res) => {

      const movieId = req.params.id;
      if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

        try {
            const movie = await Movie.findById(movieId);
            if(!movie) 
               return res.status(404).json('there is no movie with this id.');
             res.status(200).json(movie)
        } catch (err) {
             res.status(500).json({error:err.message});
        } 
};

The logic is simple this function get the movie ID as a parameter and check if it is a valid ID then we search in the database else return a message that there is no movie with that ID.

getAllMovies :

// GET ALL MOVIES 
const getAllMovies = async (req, res) => {

    try {
        const movies = await Movie.find();
        return res.status(200).json(movies)
    } catch (err) {
        return res.status(500).json({message :'server error'})
    }

};

updateMovie:

// UPDATE MOVIE 
const updateMovie = async (req, res) => {

    const errors = validationResult(req);
     if(!errors.isEmpty()) 
        return res.status(400).json({ errors: errors.array() });

    const { title, description, creator } = req.body;
    const movieId = req.params.id;
    if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

     try {
         const movie = await Movie.findById(movieId);
         if(!movie)
            return res.status(404).json({message: 'movie not found.'});
         await movie.updateOne({
             title,
             description,
             creator
         })
         return res.status(200).json(movie)
     } catch (err) {
         console.log(err.message);
         res.status(500).json({error : 'server error'});

     }
};

deleteMovie :

//DELETE MOVIE 
const deleteMovie = async (req, res) => {

    const movieId = req.params.id ; 
    if(!ObjectId.isValid(movieId))
           return res.status(400).json({error : 'Invalid id'});

    try {
        const movie = await Movie.findById(movieId);
        if(!movie) 
           return res.status(404).json({message : 'there is no movie with this id.'});

        await movie.remove();
        res.status(200).json({message : 'movie removed'});
    } catch (err) {
        console.log(err.message);
        res.status(500).json({error : 'server error'});
    }

};

Now we need to build an authentication middleware to protect some of our API routes because in our API anyone can add, update and delete movies without authentication and this is bad.

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

In the middleware folder, create a file called auth.js :

const jwt = require('jsonwebtoken');

module.exports = function(req, res, next){

    const token = req.header('x-auth-token');
    if(!token) 
       return res.status(401).json({ message: 'No token, authorization dnied.'});
    try{
        const decoded = jwt.verify(token,'supersecretkey');
        req.user = decoded.user;
        next();
    }catch(err){
        res.status(401).json({ message: 'Token is not valid' });
    }
}

Let me explain :
when the user makes a login or register The API return a token this token indicates that the user is authenticated but to use it we need to add it in the header as 'x-auth-token' with that when the user wants to add a movie the auth middleware get this token from the header and test if it is a valid token then he can add a movie else the middleware return an error that the token not valid.

To protect our API, we just have to import the auth middleware in the movie-routes.js and add it as a second argument in every route we want to protect.

//movie-routes.js
// CREATE MOVIE 
router.post('/',[auth, validation],createMovie);

// UPDATE MOVIE 
router.patch('/:id',[auth, validation],updateMovie);

// DELETE MOVIE 
router.delete('/:id',auth, deleteMovie);

Don't forget to import 'auth.js'.

Let's test our REST API with postman :

first we need to authenticate
add a new movie without add the token in the header
add a new movie with the token in the header (just copy the token and go to header add new key 'x-auth-token' and put the token as a value)
get movie by ID
get all movies
update movie
delete movie

Now we can say that our API is done, we cover all the basics and rules that will you need when you build your own REST API.

Thank you.

React : Make your own pagination

Ridha Mezrigui — Sun, 13 Sep 2020 17:25:30 +0000

hello community,

today i'll show you how to make your own pagination without using any package.

let's get started

first thing we need to do is to create a react app

npx create-react-app make-pagination
cd make-pagination //navigate to our project
code . //open our react app with vscode

let's say that we want to fetch the data of our users and for that
i'll use Mockaroo to generate a dummy data.
in src folder we create a new file data.js this file will contain the users dummy data.

//data.js
export const Data = [
{"id":1,"name":"Anna-maria","email":"ajehaes0@vinaora.com"},
{"id":2,"name":"Kenyon","email":"kvarfalameev1@wikimedia.org"},
{"id":3,"name":"Twila","email":"tkelby2@amazon.com"},
{"id":4,"name":"Rudd","email":"rcatling3@about.me"},
{"id":5,"name":"Robby","email":"rbenini4@behance.net"},
{"id":6,"name":"Viviyan","email":"vcurlis5@addtoany.com"},
{"id":7,"name":"Gabriello","email":"gdaines6@purevolume.com"},
{"id":8,"name":"Carter","email":"ckoubek7@wikipedia.org"},
{"id":9,"name":"Berna","email":"bdimatteo8@umich.edu"},
{"id":10,"name":"Marlow","email":"mhedditch9@usda.gov"},
{"id":11,"name":"Corella","email":"cdiperausa@newsvine.com"},
{"id":12,"name":"Cherida","email":"cstarkieb@vk.com"},
{"id":13,"name":"Zackariah","email":"zbathoc@cam.ac.uk"},
{"id":14,"name":"Orelee","email":"ogabitsd@msu.edu"},
{"id":15,"name":"Alonzo","email":"aclaire@fc2.com"},
{"id":16,"name":"Vonnie","email":"vkillbyf@cornell.edu"},
{"id":17,"name":"Weidar","email":"wdeyesg@whitehouse.gov"},
{"id":18,"name":"Cyb","email":"cternouthh@surveymonkey.com"},
{"id":19,"name":"Melisent","email":"modayi@loc.gov"},
{"id":20,"name":"Darbee","email":"djanecekj@stumbleupon.com"}
]

now let's fetch these users without pagination
first we create a "user" folder then we create two files user.jsx component and user.css cuz we need some basic css style.

//user.jsx
import React from 'react';
import './user.css';

const User = ({name, email}) => {
    return ( 
        <div className='user'>
            Name : {name} <br/>
            Email : {email}
        </div>
     );
}

export default User;

/* user.css */
.user{
    padding: 10px;
    margin:10px auto;
    width:50%;
    border : 1px solid #eee;
}

in the "App.js" component we import user.jsx and Data.js and fetch our data.

//App.js
import React from 'react';
import './App.css';
import { Data } from './data';
import User from './user/user';

function App() {
  return (
    <div className="App">
    <h1>ALL USERS</h1>
      {
        Data.map(user => <User key={user.id}
                               name={user.name}
                               email={user.email} />
        )
      }
    </div>
  );
}

export default App;

the result

20 users in the same page is a little bit annoying in this case we need to use pagination.

Create the pagination component

1- create `pagination` folder contain two files `pagination.jsx` and `pagination.css`.

first we need to install a lodash package

npm i --save lodash

//pagination.jsx
import React from 'react';
import _ from 'lodash';
import './pagination.css';

const Pagination = (props) => {

    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    const pageCount = Math.ceil(itemsCount / pageSize);
    if (pageCount === 1) return null;
    const pages = _.range(1, pageCount + 1);

    return (
        <div className="pagination">
            {pages.map(page => (
                <div href={null} key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : 'page-item'}>
                    {page}
                </div>
            ))}
        </div>
    )
}

export default Pagination;
```


itemsCount, pageSize, currentPage and onPageChange are props we will pass them when we implement the pagination in the `App.js` component.


```css
/* pagination.css */
.pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination div {
  color: white;
  float: left;
  padding: 8px 16px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;

}

/* Style the active/current link */
.pagination div.active {
  background-color: #05aff1;
}

/* Add a grey background color on mouse-over */
.pagination div:not(.active) {
  background-color: #444444;
}


```


### 2- Create a javascript logic that will slice our dummy data 
in the src folder we create a `paginate.js` file


```javascript
import _ from 'lodash';

export function paginate(items, pageNumber, pageSize){
   const startIndex = (pageNumber - 1) * pageSize;

   return _(items)
            .slice(startIndex)
            .take(pageSize)
            .value();
}
```


this function take all data (items), pageNumber (the number of page we want to go if we have 20 users and and we want 4 users in each page 20/4=5pages if we want to see the users in page 3 we start slice our data from index: (3-1)*4=8), the pageSize (number of users in each page) and return new table contain  a pageSize elements.

### 3- Implement the pagination 
in App.js component :
import `paginate` function from `paginate.js` and import `useState` hook then



```javascript
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 4;

  const handlePageChange = page => {
    setCurrentPage(page);
  }

  const getPageData = () => {

    const paginationData = paginate(Data, currentPage, pageSize);
    return { totalCount: Data.length, data: paginationData }
  }

  const { totalCount, data } = getPageData();
```


now let's import `pagination` component and see the result


```javascript
const { totalCount, data } = getPageData();
  return (
    <div className="App">
      <h1>ALL USERS</h1>
      {
        data.map(user => <User key={user.id}
          name={user.name}
          email={user.email} />
        )
      }
      <Pagination
        itemsCount={totalCount}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange} />
        page {currentPage} of { totalCount / pageSize }
    </div>
```



the final result 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87j5gbgxudhbjxpa6k32.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ot31vwjy3brqf1oomfy.PNG)

I hope you enjoyed this blog.

Node.js : REST API part 1

Ridha Mezrigui — Mon, 07 Sep 2020 14:31:37 +0000

Liquid syntax error: Unknown tag 'endraw'

React Hooks : How to manage your form state dynamically using a custom hook

Ridha Mezrigui — Sat, 05 Sep 2020 16:23:26 +0000

Hello community,

In this post, I'm going to show you how to manage your form state dynamically using a custom hook in a few steps.

So first, what are hooks?

Hooks are a new addition in React 16.8 to let you use state and other React features without writing a class, and the funniest thing is that you can build your own custom Hook.
Custom Hooks allow us to abstract the business logic from the component and make it reusable cross other components.

1. Create a react-app :

npx create-react-app manage-form-state

2. Build our form:

// app.js
import React from 'react';

function App() {

  const formHandler = e => {
    e.preventDefault();
    console.log('form handler');
  }

  return (
    <div className="App">
      <form onSubmit={formHandler}>
        Name : <input type='text' /> <br />

        Email : <input type='email' /><br />

        Address : <input type='text' /><br />

        Phone : <input type='text' /><br />

        Password : <input type='password' /><br />

        <input type='submit' value='Submit' />
      </form>
    </div>
  );
}

export default App;

3. Create a formReducer function :

//form-reducer.js
const formReducer = (state, action) => {
    switch (action.type) {
        case 'INPUT_CHANGE':
            return {
                ...state,
                inputs: {
                    ...state.inputs,
                    [action.inputId]: action.value
                }
            }
        default:
            return state;
    }
}

export default formReducer;

4. Create our 'useForm' custom hook :

//form-hook.js
import { useReducer } from 'react';
import formReducer from  './form-reducer';

export const useForm = (initialInputs) => {
    const [formState, diaspatch] = useReducer(formReducer, {
        inputs: initialInputs
    });

    const inputHandler = (id, value) => {
        diaspatch({
            type: 'INPUT_CHANGE',
            value: value,
            inputId: id
        })
    }

    return [formState, inputHandler];
};

5. Implement the 'useForm' logic in our form :

first, we have to import our useForm hook and initialize the state

import React from 'react';
import './App.css';
import { useForm } from './form-hook';

function App() {
  const [formState, inputHandler] = useForm({
    name: '',
    email: '',
    address: '',
    phone: '',
    password: ''
  });

Now we need another function that will call the inputHandler when the input value change

const changeHandler = e  => {
     const {id,value} = e.currentTarget;
     inputHandler(id,value);
  }

finally, we are ready to update our form

 const { name,email,address,phone,password } = formState.inputs;
  return (
    <div className="App">
      <form onSubmit={formHandler}>
        Name : <input type='text' id='name' 
                     value={name} 
                     onChange={changeHandler} /> <br />

        Email : <input type='email' id='email' 
                       value={email} 
                       onChange={changeHandler} /><br />

        Address : <input type='text' id='address' 
                         value={address}
                          onChange={changeHandler} /><br />

        Phone : <input type='text' id='phone' 
                       value={phone} 
                       onChange={changeHandler} /><br />

        Password : <input type='password' id='password' 
                          value={password} 
                          onChange={changeHandler} /><br />

        <input type='submit' value='Submit' />
      </form>
    </div>

Forem: Ridha Mezrigui

React: the reconciliation algorithm

What is the reconciliation algorithm?

How does the reconciliation algorithm work?

Example

Optimizing the performance using Keys

Conclusion

React.js: The one way and the opposite way data flow

Introduction

The one way data flow

The opposite way data flow

The opposite way data flow implementation

Refactor the SearchInput component

Refactor the Search component

Result

Conclusion

React.js : debouncing and throttling

Introduction

Debouncing

Definition and implementation of a debounce function

Implement debounce function into our example

Result

Throttling

Definition and implementation of a throttle function

Implement throttle function into our example

Result

Conclusion

Node.js : REST API part 2

Let's get started

React : Make your own pagination

let's get started

Create the pagination component

1- create pagination folder contain two files pagination.jsx and pagination.css.

Node.js : REST API part 1

React Hooks : How to manage your form state dynamically using a custom hook

So first, what are hooks?

1. Create a react-app :

2. Build our form:

3. Create a formReducer function :

4. Create our 'useForm' custom hook :

5. Implement the 'useForm' logic in our form :

1- create `pagination` folder contain two files `pagination.jsx` and `pagination.css`.