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...