useEffect

import React, { useState, useEffect } from 'react'

const App = () => {
    const [countries, setCountries] = useState([])

    useEffect(() => {
        const getCountries = async () => {
            const response = await fetch('https://restcountries.eu/rest/v2/all?fields=name')
            const responseJson = await response.json()
            console.log(responseJson)
            setCountries(responseJson)
        }
        getCountries()
    }, [])

    return (
        <div>
            <ul>
                {countries.map((country, index) => {
                    return (
                        <li key={index}>
                            {country.name}
                        </li>
                    )
                })}
            </ul>

        </div>
    )
}

export default App

localStorage and sessionStorage To Store Data

localStorage and sessionStorage To Store Data
....................................................................................................................................................................................................................................
LocalStorage

import React, { Component } from 'react'
class App extends Component {

  setData() {
    let obj = { name: 'Sapan', password: 123333, email: 'my@gmail.com' }
    localStorage.setItem('mysetData', JSON.stringify(obj))
  }
  
  getData() {
    let data = localStorage.getItem('mysetData')
    data = JSON.parse(data)
    console.log(data)
   console.log(data.email)
  }

  render() {
    return (
      <div>
        <h1>Hello</h1>
        <button onClick={() => this.setData()}>setData</button>
        <button onClick={() => this.getData()}>getData</button>
      </div>
    )
  }
}

export default App

................................................................................................................................................................................................................................
SessionStorage

import React, { Component } from 'react'
class App extends Component {

  setData() {
    let obj = { name: 'Sapan', password: 123333, email: 'my@gmail.com' }
    sessionStorage.setItem('mysetDatasession', JSON.stringify(obj))
  }

  getData() {
    let data = sessionStorage.getItem('mysetDatasession')
    data = JSON.parse(data)
    console.log(data)
    console.log(data.email)
    console.log(data.name)
  }

  render() {
    return (
      <div>
        <h1>Hello</h1>
        <button onClick={() => this.setData()}>setData</button>
        <button onClick={() => this.getData()}>getData</button>
      </div>
    )
  }
}

export default App

React native app optimization or Performance && clean

React native app optimization or Performance.

How to clear react native cache?

How to reset iOS Simulator or Erase all simulator data ?
To reset the iOS simulator and erase all simulator data go to menu and Hardware -> Erase All Content and Settings


How to clean iOS build ?
To clean the iOS build press Option+Shift+Command+K or go to Xcode menu Product -> Clean Build Folder.
This will only clean cache for your current target.

How to clean Android Build Cache
Go to root directly of your react native project and run following commands:
cd android && ./gradlew cleanBuildCache

or

cd android && gradlew cleanBuildCache

Happy Cleaning !!

.............................................................................................................................................................................................................................
 Memory Issues
The Problem

Memory leaks are one of the main problems, particularly for Android apps built on React Native because of many unnecessary background processes.

You can find leaks using XCode as follows:

a. Navigate to XCode > Product > Profile
b. Choose Leaks

You can find memory leaks using Android Studio as follows:

a. Start your React Native app normally
b. Run Android Studio
c. Navigate to Tools > Android > Enable ADB Integration
d. Click on Tools > Android > Android Device Monitor
e. After the Android Device Monitor starts, click on Monitor > Preferences
f. Use Perf Monitor to identify any memory leaks

Navigation Project

......................................................................................................................................................................................................................................
Add.js
import React, { Component } from 'react'
import { connect } from 'react-redux'

class AddProduct extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            name: '',
            price: ''
        }
    }
handelTextInput=(e)=>{
    this.setState({
        [e.target.name]: e.target.value
    })
}

onSubmit=(e)=>{
    e.preventDefault()
    this.props.dispatch({
        type: 'ADD_PRODUCT',
        sapan: this.state
    })
 
    this.props.history.push('/')
}
    render() {
        return (
            <>
                <h1>Add Product</h1>
                <form onSubmit={this.onSubmit}>
                    <input type='text' name='id' value={this.state.id}  onChange={this.handelTextInput} /><br></br><br></br>
                    <input type='text' name='name' value={this.state.name} onChange={this.handelTextInput} /><br></br><br></br>
                    <input type='text' name='price' value={this.state.price} onChange={this.handelTextInput} /> <br></br><br></br>
                   <button type='submit'>Save</button>
                </form>
            </>
        )
    }
}

export default connect()(AddProduct)
....................................................................................................................................................................................................................................
Edit.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class EditProduct extends Component {


onSubmit=(e)=>{
    e.preventDefault()
    this.props.dispatch({
        type: 'UP_PRODUCT',
        product: {
            id: e.target.id.value,
            name: e.target.name.value,
            price: e.target.price.value
        }
    })
 
    this.props.history.push('/')
}

    render() {
        return (
            <>
                <h1>Edit Product</h1>
                <form onSubmit={this.onSubmit}>
                    <input type='text' name='id' readOnly={true} defaultValue={this.props.product.id}/>
                    <input type='text' name='name' defaultValue={this.props.product.name} />

                    <input type='text' name='price' defaultValue={this.props.product.price} />
                    <input type='submit' value='Save'/>
                </form>
            </>
        )
    }
}
const mapStateToProps=(state)=>{
    return{
        product:state.products[0]
    }
}

export default connect(mapStateToProps)(EditProduct)

..........................................................................................................................................................................................................................
List.js

import React, { Component } from 'react'
import { connect } from 'react-redux'


class ListProduct extends Component {
    Edit=(e)=>{
        var id = e.target.getAttribute('data-id')
        this.props.dispatch({
            type:'EDIT_PRODUCT',
            id:id
        })
        this.props.history.push('/edit/'+ id)

    }

    Delete=(e)=>{
        var id = e.target.getAttribute('data-id')
        alert(id)
        this.props.dispatch({
            type:'DELETE_PRODUCT',
            id:id
        })
        this.props.history.push('/')
    }
    render() {
        return (
            <>
                <h1>List Product</h1>
                <table border='2'>
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.product.map((sapan, index)=>{
                            return(
                                <tr key={index}>
                                    <td>{sapan.id}</td>
                                    <td>{sapan.name}</td>
                                    <td>{sapan.price}</td>
                                    <td>
                                        <input type='button' value='Edit' data-id={sapan.id} onClick={this.Edit}/>
     
                                        <input type='button' value='Delete' data-id={sapan.id} onClick={this.Delete}/>
                                        </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>

            </>
        )
    }
}
const mapStateToProps=(state)=>{
    return{
        product:state.products
    }
}
export default connect(mapStateToProps)(ListProduct)
......................................................................................................................................................................................................................
reducers
reducer.js

const initialState = {
    products: []
}

const productReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_PRODUCT':
            return {
                ...state,
                products:state.products.concat([action.M])
            }
            case'DELETE_PRODUCT':
            return{
                ...state,
                products: state.products.filter((p)=>p.id !==action.id)
            }
            case 'EDIT_PRODUCT':
                return{
                    ...state,
                    products: state.products.filter((p)=>p.id ===action.id)
                }
                case 'UP_PRODUCT':
                    var pro =state.products.map((p)=>{
                        if(p.id === action.product.id){
                            return{
                                ...p,
                                id:action.product.id,
                                name: action.product.name,
                                price: action.product.price
                            }
                        }
                        else {
                            return p
                        }
                    })
                    return{
                        ...state,
                        products: pro
                    }
        default:
            return state

    }

}

export default  productReducer

..................................................................................................................................................................................................................

App.js
import React, { Component } from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import productReducer from './reducers/reducers'

import ListProduct from './products/List'
import AddProduct from './products/Add'
import EditProduct from './products/Edit'

const store = createStore(productReducer)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Link to="/">Home | </Link>
          <Link to="/add"> Add | </Link>
          <Link to="/edit/:id">Edit | </Link>
          <Switch>
            <Route path="/" exact strict component={ListProduct} />
            <Route path="/add" exact component={AddProduct} />
            <Route path="/edit/:id" exact component={EditProduct} />
          </Switch>
        </BrowserRouter >
      </Provider>

    )
  }
}