1- to make a util file to fetch the 
  state of loging from local storage, instead of writing each whare...
  2- also, a util file for toast options rather than injecting elsewhere...

  1- use debounce to reduce the amount of rerendering, due to the handle change amount
  every key stroke...
  2- make a comparison between submitting a form with a classic way,
  and with by using action in the routes...
  3- try using try and catch method for handling async process,
  like in post request for storing data inputs...
  4- why we use a states for handling user data inputs, why we don't use
  another way, as long as the action of recording and validation of data 
  happen after a user pressing on submit button...
  5- to make a util file to fetch the 
  state of loging from local storage, instead of writing each whare...
  6- also, a util file for toast options rather than injecting elsewhere...

  => the same points as Register page...

  1- we can use (export const socket = io(host,{
        autoConnect: false
  }))
  and then we must use socket.connect() method...
  to make the user add some credentials before connecting...

  2- why here we use the socket as a ref

  1- use debounce to reduce the amount of rerendering, due to the handle change amount
  every key stroke...
  2- to make a util file to fetch the 
  state of loging from local storage, instead of writing each whare...
  3- also, a util file for toast options rather than injecting elsewhere...

  1- to make a util file to fetch the 
  state of loging from local storage, instead of writing each whare...
  2- also, a util file for toast options rather than injecting elsewhere...

  1- to make a util file to fetch the 
  state of loging from local storage, instead of writing each whare...
  2- also, a util file for toast options rather than injecting elsewhere...