React Native - reduce render times to optimize performance while using React hooks

Active3 hr before
Viewed126 times

10 Answers


In the examples below, the useEffect() hook has 3 parameters: dropdownSetting, props.maricopaCountyDates, props.unitedStatesDates. Each time one of those parameter changes, the useEffect() hook will run, which will modify the state using setDates.,The optimized useEffect() hook below performs better due to when we // Check If Data Exists in useEffect() hook within the child component.,Since the useEffect runs on every change to one of the arguments (dropdownSetting, props.maricopaCountyDates, props.unitedStatesDates), it will run twice when props change from the following: [] and [‘item1,’ ‘item2', ‘item3’, ‘item4', ‘item5'].

 Pretag team - issue, fix, solve, resolve

To optimize on rerenders, you should make use of useCallback hook to memoize your function references,After releasing React v16.8, now we have hooks to use in React Native. I am doing some simple tests to see the render times and the performance between Hooked functional components and class components. Here is my sample:,So here's the question. Is there any solution that I can keep the benefits of both size, decreasing the re-render times while using the hooks? Thank you.

To optimize on rerenders, you should make use of useCallback hook to memoize your function references

const LoginScreen = memo(({ navigation }) => {
  const appUser = useContext(UserContext);
  const [foo, setFoo] = useState(false);

  const userLogin = useCallback(async () => {
    let response = await fetch('blahblahblah');
    if (response.is_success) {
    } else {
      // fail on login, error handling
  }, []); // Add dependency if need i.e when using value from closure

  const toggleFoo = useCallback(() => {
    setFoo(prevFoo => !prevFoo); // use functional state here
  }, []);

  console.log("render Login Screen"); // check render times
  return (
      <Text>Login Screen</Text>
      <Button onPress={userLogin} title="Login" />
      <Button onPress={toggleFoo} title="Toggle Foo" />

export default LoginScreen;

Also note that React.memo cannot prevent re-renders due to context value changes. Also note that while passing value to context provider you should make use of useMemo too

export const UserContextProvider = ({ children }) => {
  let [ user, setUser ] = useState(null);

  const login = useCallback((loginUser) => {
    if (loginUser instanceof User) { setUser(loginUser); }
  }, []);

  const logout = useCallback(() => {
  }, []);

  const value = useMemo(() => ({
     value: user,
     login: login,
     logout: logout,
  }), [user, login, logout]); 
     Note that login and logout functions are implemented using `useCallback` and 
     are created on initial render only and hence adding them as dependency here 
     doesn't make a difference and will definitely not lead to new referecne for 
      value. Only `user` value change will create a new object reference
  return (
    <UserContext.Provider value={value}>
load more v

If you visit a site with React in development mode, the icon will have a red background:,If you aren’t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background:,Webpack v4+ will minify your code by default in production mode.

npm run build
load more v

This will print a table with the amount of time components wasted in rendering.,React provides a simple way for the developer to indicate if a component needs re-rendering. This is where the shouldComponentUpdate method comes into play.,When this function returns true for any component, it allows the render-diff process to be triggered.

 Pretag team - issue, fix, solve, resolve

If you try to run this app on your machine, you can see that when you press the "Increase Counter" button several times, the render counter shows the same number as the counter state. Meaning that the Counter component is being rerendered whenever our counter state changed.,In the Counter component, we have a counter state which will increase each time we click the "Increase Counter" button, and a renders ref which will tell us how many times this component is being rerendered.,Now, when we type in the new text field, the Counter component doesn't rerender itself, because our memoized function will ignore everything that happens in the newValue state.

$ npx create - react - app app - name
load more v

On the other hand, in order to optimize UI updates, we can consider converting function components to a PureComponent class (or a class with a custom shouldComponentUpdate method). However, if the component doesn’t use state and other life cycle methods, the initial render time is a bit more complicated when compared to function components with potentially faster updates.,The items in the list don't have IDs and the list is never going to be reordered or filtered,In the React landscape, we use the notion of Component to maintain the internal state of components, and changes to the state can cause the component to re-render.

 Pretag team - issue, fix, solve, resolve

Well, the component will re-render right? What’s gonna happen to someRandomObject ?,Every time the component re-renders, all these steps will happen. As a good developer, you can not allow this. You need to somehow cache the formatCounter() and onClick() methods so they don't get added to memory on every re-render.,Let’s see an example of a functional component with some state, re-rendering due to change in its state.

 Pretag team - issue, fix, solve, resolve

Identify where long lists of content are rendered and optimize them with react-window.,Since its introduction 6 years ago, React has changed the way we build web apps. Several UI libraries like Vue.js and Preact.js were started after React. Existing libraries like Angular, Dojo and Ember updated their rendering libraries to optimize how DOM updates get handled, each coming up with their own way to optimize rendering performance. Many libraries and npm modules were built around React to make development easier. Today there are tens of thousands of packages around React in the NPM repository. And more are being released every day.,Stay up to date with the latest information from the topics you are interested in

 Pretag team - issue, fix, solve, resolve

The numbers from the profiler are relative. Most times and components will render more quickly in production. Nevertheless, this should help you to figure out when the UI is updated by mistake, as well as how deep and how often the UI updates occur.,In this situation, we could configure every component to only render or diff when necessary, to avoid wasting resources and time.,Dynamic imports Split code via inline function calls within modules.

// On first render, React calls MemoizedPhoto function.
<MemoizedPhoto title="Effiel Tower" location="Paris" />

// On next render, React does not call MemoizedPhoto function,
// preventing rendering
<MemoizedPhoto title="Effiel Tower" location="Paris" />

Optimization is the number one thing that is on the mind of every dev when building any software, especially web apps. JS frameworks like Angular, React and others, have included some awesome configurations and features. Here, I’ll review the features and tricks that will help you optimize your app’s performance.,Lazy loading has come to be one of the optimization techniques widely used now to speed up the load time. The prospect of Lazy Loading helps reduce the risk of some of the web app performance problems to a minimal.,See, we used the shouldComponentUpdate method to set when our component will be re-rendered effectively boosting the performance of our component.

 Pretag team - issue, fix, solve, resolve

Other "render-hooks" queries related to "React Native - reduce render times to optimize performance while using React hooks"