JAVASCRIPT

How to use useState Hook in React/ReactNative

import React, { useState } from 'react';

function StepTracker() {
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(prevState => prevState + 1);
  }

  return (
    <div>
      Today you've taken {steps} steps!
      <br />
      <button onClick={increment}>
        I took another step
      </button>
    </div>
  );
}

ReactDOM.render(
  <StepTracker />,
  document.querySelector('#root')
);

usestate in react

  const [x, setx] = useState(0);

How to usestate in react

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

usestate in react

function handleOrangeClick() {
    // Similar to this.setState({ fruit: 'orange' })
    setFruit('orange');
  }

How to use React useState Hook

useState - Has the main purpose to change an element status
useState basically helps React to know what to elements need to be rerendered. 

Ex: We have a post                 (state: it is displayed) 
    You want to eliminate the post (setState: it is not displayed)

Code Ex.:
const [blogs, setBlogs] = useState([  
    { title: 'React forever', body:'Lorem ipsum...', author: 'Sara', id: 1 },
    { title: 'Vue kinda sucks', body:'Lorem ipsum...', author: 'Tony', id: 2 },
    { title: 'Angular lets not go there', body:'Lorem ipsum...', author: 'John', id: 3 },
  	]);

// The JS function that filters all the post with diff. id from the id of the post clicked
const handleDelete = (id) => {
  const newBlogs = blogs.filter(blog => blog.id !== id);
    setBlogs(newBlogs);
  }

// React renders the following JSX
return (
    <div className="blog-list">
      <h2>{ title }</h2>
        {blogs.map((blog) => (
          <div className="blog-preview" key={blog.id}>
            <h3>{ blog.title }</h3>
            <p>written by { blog.author }</p>
            <p>{ blog.body }</p> 
            <button onClick={() => handleDelete(blog.id)} className="hideBtn">Hide Post</button>
          </div>
        ))}
    </div>
    );
  

usestate in react

The initial value will be assigned only on the initial render (if it’s a function, it will be executed only on the initial render).