how to set state when change viewport react

import React, { useLayoutEffect, useState } from 'react';

function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
window.addEventListener('resize', updateSize);
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;

function ShowWindowDimensions(props) {
const [width, height] = useWindowSize();
return <span>Window size: {width} x {height}</span>;

how to show a success message when ajax called successfully

1- "beforeSend" event used to execute something before ajax call
2- "complete" event used to execute something after the ajax called successfull.

url: ' @Url.Action("AttendanceUpdateLate", "Attendance")',
data: { Emp: $("#txtEmpid").val(), Status: $("#ddlAttendance").val(), day: $("#ddlday").val(), Month: $("#Month").val() },
datatype: "json",
type: "POST",
contenttype: 'application/json; charset=utf-8',
async: true,
success: function (data) {
beforeSend: function () {
alert("Alert showing before AJAX call");

complete: function () {
alert("Alert showing after AJAX call successfully");
error: function (xhr) {
alert('error occured');

how to replace all the string in javascript when the string is javascript variable

const p = 'dog dog cat rat';

const regex = /dog/gi;

console.log(p.replace(regex, 'cow'));
//if pattern is regular expression all matches will be replaced
//output: "cow cow cat rat"

function name(str,replaceWhat,replaceTo){
replaceWhat = replaceWhat.replace(/[-/\^$*+?.()|[]{}]/g, '\$&');
var re = new RegExp(replaceWhat, 'g');
return str.replace(re,replaceTo);

function name(str,replaceWhat,replaceTo){
var re = new RegExp(replaceWhat, 'g');
return str.replace(re,replaceTo);

how to rerender a page in React when the user clicks the back button

We had a similar desire and solved it by passing a refresh function from the parent to the child.

for example, when you open the child, you would have something like navigate('Child', { refresh: refreshFunction }

You can then access this function in the child ( via something like this.props.navigation.state.params.refresh(); ) before the back action.