Pure component react | Pure Component in React

 Pure Component in React

In this article we will learn about react pure component with example. first we will under stand the problem then will take a look at solution.

Problem

If we have a value in our state / props and if we are updating our state / props again with same value as old value in state / props. it will re-render our component again. But in actual component should not be render again if same value is again coming in state / props.

if a value already exists in our state or props and we update them again with the same value as the previous value.

It will render our component once again. however, if the same value is again sent in the state or props, the component itself shouldn't be rendered again.

Pure Component in React

It is used to prevent component re-render. react pure components compare the new incoming value of state/props against the previous value of state/props. It won't re-render the component if the old value and the incoming value are similar. The component will be rendered if the old value and the incoming value are both different.

Note:

React pure component is feature that we import from react and this feature is only used in react class component. To achieve same functionality in react functional component we use useMemo hook.

React Pure component example

import React from 'react'

class Student extends React.PureComponent {

constructor()

{

    super()

    this.state = {

        name:"Richard"

    }

}

render() {

return (

    <div className="text-center">

        <h1>Pure Component </h1>

        <h3>My Name is : {this.state.name}</h3>

        <button

            onClick={() => this.setState({name : "Rizwan"})}>

                Update Name

        </button>

    </div>

)}}

export default Student

in above example first time component will render. when we will click update button this will update the value of statue from "Richard" to "Rizwan" so old value and upcoming values are not same due to this component will render again. Now state value  is "Rizwan" so if we press again update button the component will not render again because old value and incoming value of state is same. 

So this is react pure component.

Thanks.

Controlled and Uncontrolled components in react

 Controlled and Uncontrolled

 components in react

In this article we will learn about controlled and uncontrolled components in react js

Controlled component react js

In react component in which we manage our input fields via react state this component known as react controlled component.

Uncontrolled components react js

The react component that have input filed and its input field should not be controlled with react js state, input filed may be controlling  with direct JavaScript or with refs. This is bit like as traditional JavaScript but main thing is that fields will be not be controlled via React js State. These Component directly handle through DOM.

Note:

• Both controlled and uncontrolled components  can be used in class component and in  functional component.
• If someone talk with you about react controlled or uncontrolled component. it's 100%  that here will be at least one input filed  in that component

Controlled Component Example

import React,{useState} from 'react'

export default function Teacher() {

   const[name,setName] = useState()

   const[subject,setSubject] = useState()

    const submitHandler = (e) =>{

        e.preventDefault()

        console.log("Name : ",name)

        console.log("Subject : ",subject)

    }

    return (

  <div className = "text-center">

    <h1>Controlled Component</h1>

      <form onSubmit = {submitHandler}>

        <input  type = "text" onChange = {e => setName(e.target.value)}      placeholder = "Name"/>

         <input   type = "text"  onChange = { e => setSubject(e.target.value)}  placeholder = "Subject"/>

          <input  type = "submit"  value = "Submit"/>

      </form>

  </div>

    )

}

Uncontrolled Component Example

import React,{useRef} from 'react'

export default function Student() {

    let name = useRef(null)

    let subject = useRef(null)

    const submitHandler = (e) =>{

        e.preventDefault()

        console.log("Name : ",name.current.value)

        console.log("Subject : ",subject.current.value)

    }

    return (

  <div className="text-center">

    <h1>UnControlled Component</h1>

     <form onSubmit = {submitHandler}>

       <input 

type = "text" 

ref = {name}  

placeholder = "Name"/>

        

        <input  

type = "text" 

ref = {subject}

placeholder = "Subject"/>         

         <input  type = "submit"  value = "Submit"/>

     </form>

  </div>

    )

}

Thanks.

 Presentational and Container components

In this article we will learn about presentational and container components with example 

Presentational Components 

• Responsible only for rendering views. its all about how things will appear on the front end, for example (Markup, Style)
• Its main focus is on UI.
• These components weren't in direct communication with services or other data sources.
• Mostly, they get information via props and displays. they don't have a state of their own.

Container Components

• Responsible for handling dynamic tasks including data retrieval and state updating etc
• Deliver data to the presentational component via props
• Maintain state and communicate with data source

 Code Example of  Presentational Component

import React from 'react'

// receiving props in Presentational Component 

export default function Presentational({ users }) {

    return (

        <div>

            <h1>I am Presentational Component</h1>

            {/* displaying props Data */}

            <ul>

                {users ? users.map((user, index) => {

                   return (<li key={index}>{user.name}</li>)

                }) : "Loading . . ."}

            </ul>

        </div>

    )

}

 Code Example of  Container Component

import React from 'react'

import Presentational from './Presentational'

export default function Container() {

    const [data, setData] = React.useState();

    // interacting with api to get data

    React.useEffect(() => {

        try {

            fetch('https://jsonplaceholder.typicode.com/users')

                .then(response => response.json())

                .then(jsonData => setData(jsonData))

        }

        catch (e) {

            console.log("Error : " + e)

        }

    }, [])

    return (

        <div>

            {/* passing data to Presentational via Props */}

            <Presentational users={data ? data : null} />

        </div>

    )

}

Thanks...

React context api | Props Drilling in React

Learn React context API | React Props Drilling

Why we use React context API?

First of all we will understand the problem and then will understand how react context api solve this issue.

Problem (What is props drilling)

Sometime we need to transfer data from one component to another.

So, if our hierarchy is only two levels deep, we can easily transfer data from parent to child.

However, if we have a nth level hierarchy and need to send data to a nth child, we will send data From parent to first level child, then first level to second level child, then second level to third level child, then last child or nth child, this is called props drilling  it will become not only complex, but extremely complex.

Context API is used to avoid from props drilling. We stored data on a global level with the help of the context API, which we can easily access in every component of the project. and Redux also offer the same solution.

What is React Context API ?

context api is built-in api that was introduced  in 16.3 version of React. it is used to pass data from one component to other. now we have

no need to make the chain of passing props from parent to child then child to super child then super child to next child (props drilling), with context api we can store Data on Global place and can easily access in any component where we want.

Redux vs Context

React Redux

• React Redux is  an external library.
• we Need to install Redux to use in our React Project
  
• if You will use Redux your  all component will be under the redux
• we can use Redux with both class and functional component

React Context Api

• Context API in inbuilt in React
• We have no need to install it.
• You no need to take all project/ component under the context, You keep all project ,10 component, 20 component or as per your requirement its totally up to you.
• we can use context with both class and functional component.
  

Code of Context api Example

Now I am going to solve example according to above  hierarchy  and I will  use Data in Super Child 

(last component)

First I Created Parent Component

import React, { createContext } from 'react' //import createContext from react

import Child from "./Child";

const Students=["Rizwan","Ahsan","Zaman","Hamza","Fizan"]   // we will use this Student array in Super Child

export const GlobalData = createContext();

export default function Parent() {

    return (

        /* Wrap child Components in Provider Wrapper and set

           the value that u want to receive in any component

         */

        <GlobalData.Provider value={Students}>

            <div>

                <h1>i am parent Component</h1>

                <Child />

            </div>

        </GlobalData.Provider>

    )

}

Now I am  creating  Child component

import React from 'react'

import SuperChild from "./SuperChild"

export default function Child() {

    return (

        <div>

            <h2> I am Child Component</h2>

            <SuperChild />

        </div>

    )

}

Now  I am  creating Super Child component

import React, { useContext } from 'react'//import useContext from React

//import GlobalData that  created and exported in Parent Component

import { GlobalData } from "./Parent" 

export default function SuperChild() {

    const Data = useContext(GlobalData)// pass Global Data iin useContext function

    return (

        <div>

            <h3>i am SuperChild Component </h3>

        

            {Data ? Data.map((item, index) => {

               return (<p key={index}>{item}</p>)

            }) : "Not Found"}

        </div>

    )

}

Final Output

i am parent Component

I am Child Component

i am SuperChild Component

Rizwan

Ahsan

Zaman

Hamza

Fizan