React Deeper dive

Components

React apps are made using components. Each component has it's own logic. React components are Javascript functions.

function App(){
    return(
        <>
            <h1> Hello world </h1>
        </>
    ) 
}

export default App

Nesting the components

React allows to nest one component inside another component.

Let's create a button component and use inside this hello world component.

function App() {
  return (
    <>
    <h1>Hello world</h1>
    <ButtonComponent/>
    </>
  )
}


function ButtonComponent(){
  return(
    <button>Click me</button>
  )
}

export default App

The names of react components must always begin with capital letters.

JSX is much stricter than HTML. A react component cannot return multiple JSX tags. The component must be wrapped inside a parent tag like <>...</> or <div>...</div>.

Re-Rendering in react

Re-Renders occur when a state variable changes inside a component. React had to do some actions to update the component.

import { memo, useState } from "react";

function App() {
  const[title, setTitle] = useState('My name is reuben')

  function updateTitle(){
    setTitle('My name is '+ Math.random())
  }
  return (
    <div>
      <button onClick={updateTitle}>Click here to update the title</button>
      <Header title={title}/>
      <Header title="Hello world"/>
      <Header title="Hello world2"/>
    </div>
  )
}

function Header({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

export default App;

This code renders all the Header statements whenever the button is clicked. Now our goal is to minimize these re-renders.

The "Hello world" and "Hello world2" statements does not need to be re-rendered as they are static.

For this we will use Memo.

Memo

Memo let's you to skip rendering if the props are unchanged.

import { memo, useState } from "react";

function App() {
  const[title, setTitle] = useState('My name is reuben')

  function updateTitle(){
    setTitle('My name is '+ Math.random())
  }
  return (
    <div>
      <button onClick={updateTitle}>Click here to update the title</button>
      <Header title={title}/>
      <Header title="Hello world"/>
      <Header title="Hello world2"/>
    </div>
  )
}

const Header = memo(function Header({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
});

export default App;

Rendering Lists

We use Javascript functions like map() to render a list of components.

Lets see an example where we have to render a todo list.

function App(){
    const [todo, setTodo] = useState([
    {
      id:1,
      title: 'Learn React',
      description: 'Learn it fast'
    },
    {
      id:2,
      title: 'Learn PHP',
      description: 'Learn it fast'
    },
    {
      id:3,
      title: 'Learn Angular',
      description: 'Learn it fast'
    },
    ])

    return(
       <div>
           {todo.map((item)=>{
                return <Todo key={item.id} title={item.title} description={item.description}/>
           })}    
       </div>
    )

}

function Todo({title, description}){
    return(
    <div>
        <h1>{title}</h1>
        <h5>{description}</h5>
    </div>
    )
}