We have moved to a new website!

If you are not redirected within 3 seconds, click here to go my homepage.

useState

Bino Kochumol Varghese /   April 3, 2022

useState is a React Hook that lets you add a state variable to your component.

const [statex, setStatex] = useState(initialState)
Usage
  • Adding state to a component
  • Updating state based on the previous state
  • Updating objects and arrays in state
  • Avoiding recreating the initial state
  • Resetting state with a key
  • Storing information from previous renders
react

Use the share button below if you liked it.

It makes me smile, when I see it.

Read More

Difference between React and ReactDOM

Bino Kochumol Varghese /   February 25, 2023

React is a JavaScript library for building user interfaces. ReactDOM, on the other hand, is a library that provides an interface between React and the DOM...
Read more

Lifting state up

Bino Kochumol Varghese /   February 20, 2023

Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.

  • When you want to coordinate two components, move their state to their common parent.
  • Then pass the information down through props from their common parent.
  • Finally, pass the event handlers down so that the children can change the parent’s state.
  • It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).
Read more

Controlled and uncontrolled components

Bino Kochumol Varghese /   February 18, 2023

It is common to call a component with some local state “uncontrolled”.

In contrast, you might say a component is “controlled” when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior.

When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.

References

React Doc

Read more