Basic React Hooks explained - useState

React Hooks

useState - Godfather of the hooks

useState is probably the most used and common hook. It is the simplest way to have a state in a functional component.


SYNTAX

const [value, setValue] = useState(initialValue)
  • useState returns an array
    • first item is the value of the state
    • second item is a method to set the state
    • const [value, setValue] = useState(initialValue)


WHAT HAPPENS WHEN YOU SET IT?


When you use the "setValue" function to set the value of the state variables, the component gets re-rendered. 

You should set values in event handlers or within other hooks like useEffect, because the change triggers a rerendering. Re-rendering should be only done when the rendering of the component is finished.
 function SomeDumpComponent() {
  const [text, setText] = useState('')

  setText('A new text'); 
  // here the rendering of the component is not finished.
  // The code below for rendering is not executed.
  // This can cause side-effects.

  return(<h1>{ text }</h1>);
}

EXAMPLE

Below you have a component which shows a message.
  • The message text is the state of the component
  • When the message text changes the component is re-rendered
  • setText is called within the onClick event. So the rendering of the component is finished and we call setText without problems.
export function MessageComponent() {
  const [text, setText] = useState('Welcome to Barbarian Developer')

  return  (<>
  <h1>{ text }</h1>
  <button onClick={() => setText('Bye bye earthling')}>Say Goodbye</button>
  </>);
}

Comments

Post a Comment

Popular posts from this blog

What is Base, Local & Remote in Git merge

Image
When you use a merge tool for Git and you have conflicts you often see these three versions of a file. This is called the three-way-merge. BASE LOCAL REMOTE So what are these files exactly? Imagine you have a branch. While you're working on the code, someone else has already changed the code in the main branch. Now you'll have a conflict if you merge your code into the main branch. The picture above emphasizes the points that are involved into the merge. GREEN : The common anchestor of the change. This is the BASE. RED : Your changes to the code. This is the REMOTE. ORANGE : The code change of someone else. This is the LOCAL. BLUE : The end result file after the merge. Here a more detailed illustration: Sometimes you will fallback to a two-way merge e.g. in cases where you or the other part deleted a file. Some tools refer them as "ours" or "theirs" ours => LOCAL theirs => REMOTE CONFISUNG NAMES? I personally find the naming confusing because why the h...
Read more

Asynchronous Nunjucks with Filters and Extensions

Image
The Problem Nunjucks was developed synchronous. The architecture behind is synchronous. So if you use nunjucks everything is fine until you hit an asynchronous problem. One easy example is: You want to have a method to download a data as json from a server That is easy to solve, normally. You download the data before creating the nunjucks context and pass the data to nunjucks after download. The problem arises when you don't know the source of the data in front. An example: {% set dataSource = userSelection %} {% set data = loadData('https://mydomain/sources/' + dataSource + '.json') %} The userSelection is e.g. a value from a dropdown on an html page. This can have multiple values. Now you have to download the data while rendering the nunjucks template, because you don't know the value of the "dataSource" variable upfront. Nunjucks Filters Nunjucks Filters are making the language more flexibel. Filters are nothing else then a function. In Nunju...
Read more

Debug Azure Function locally with https on a custom domain

Image
Description If you want to deploy an Azure Function normally this endpoint is publicly available. Therefore you need to secure the connection to this endpoint at least with ssl. Before you deploy you also want to test the connection probably locally. The following steps should help you to setup a https connection to a local Azure Function. 1 STEP: Create a Self Signed Certificate via PowerShell Open Windows Terminal or PowerShell as an Administrator The following script will create a self signed certificate in the "Users" own certificate store with the password 12345 The script will also export the certificate as PFX to C:\server.pfx The domain for the certificate will be "debug-local.com" $cert = New-SelfSignedCertificate -DnsName "debug-local.com", "debug-local.com" -CertStoreLocation "cert:\LocalMachine\My" $myPwd = ConvertTo-SecureString -String "12345" -Force -AsPlainText Get-ChildItem -Path "cert:\localMachine\My...
Read more