DEV Community: Rajshekhar Yadav

Shared Element Transition with React Native Reanimated

Rajshekhar Yadav — Tue, 04 Jul 2023 06:39:02 +0000

Introduction

React Native Reanimated is a powerful animation library for React Native applications. It provides a declarative and flexible way to create complex and high-performance animations. With React Native Reanimated, developers can achieve smooth and fluid animations that feel native to the platform.

Recently Reanimated has released v3. React Native Reanimated has released a new feature called Shared Element Transition. In simple words, Shared Element Transition allows you to smoothly transform a component from one screen into a component on another screen.

What we build

In this blog, I will try to explain to you how shared element work, and what are the limitations of shared element transition. We will leverage this feature to build an engaging photo gallery, where users can click on an image and seamlessly transition to a detailed view with an animated transition.

Getting Started

Before jumping in the code let's install some required dependencies.

Installation

We will be requiring React Native Reanimated and React Navigation Library. We can install it by following the command

//React Native Reanimated
npm install react-native-reanimated
Add this to your  babel.config file
 module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

// For Navigation:
>> npm install @react-navigation/native
npm install @react-navigation/stack
then try to run 
cd ios
pod install

We are good to go for playing with react native.

Creating the Image Gallery Screen

Let's start by creating the Gallery screen, where the images will be rendered in a FlatList component. This screen will serve as the entry point for our photo gallery.

In the above code, we have defined an array of images with their respective sources. We then use a FlatList component to render these images in a grid layout.

Implementing the Image Details Screen

Now let's create the Details screen, where we will display the selected image in a larger view.

In the ImageDetails screen, we retrieve the selected image from the navigation route's parameters.
Nothing fancy so far, Let's run the application.

Boring Right? Let's add some magic.

Magic aka Shared Transition

To create a shared transition animation between components on different screens, you can use the sharedTransitionTag property and assign the same tag to both components. The shared transition works by matching components with the same sharedTransitionTag. Let me show you the code.

If you need to use multiple shared views on the same screen, make sure to give each component a unique shared tag. This way, you can easily implement smooth and synchronized animations between different parts of your app.

We can also perform some customization to our transition behavior by assigning the sharedTransitionStyle props. Let me explain, how can we achieve this.

Create a custom animation file.

In this code, a custom transition animation is defined using the SharedTransition.custom method. The SharedTransition.custom the function takes a callback function as an argument. Inside the callback function, the worklet keyword is used to indicate that this code will run on the native side with the help of Reanimated's worklet runtime.

You need to add the custom transition as sharedTransitionStyle prop to your both components (on both screens).

This is how our screen transition looks after adding the aforementioned changes.

dev-rajshekhar / react-native-reanimated-example

Introduction

This GitHub repo is all about exploring the React Native Reanimated animation. We will try to explore below-mentioned animation

Shared Element Transition

Library Used

React Native Reanimated
React Native Navigation

Screenshots/Recordings

Shared Element Transition

Learn More

To learn more about React Native, take a look at the following resources:

React Native Website - learn more about React Native.
React Native Reanimated
React Native Navigation

View on GitHub

Limitation

There are a few limitations to Shared Element Transition

Only the native stack is supported.
You can only animate width, height, originX, originY, and transformMatrix properties when using the shared transition.

Final Notes

In this tutorial, we explored the powerful capabilities of React Native Reanimated by building an animated photo gallery with shared element transitions. We just have to provide sharedTransitionTag both components and it will work like a charm.

Thanks for reading this article. Feel free to add your suggestions. You can connect with me on Twitter.

useContext() Hook : Let's consume it

Rajshekhar Yadav — Sun, 23 Jan 2022 08:23:16 +0000

Introduction

In the previous part I have explained about the basic idea behind the useReducer() hooks. In this article I will try to explain about another useful hook useContext . We will discus about how to use what useContext is and how to use it. We will also discus about Context API.

The Problem

Consider a React-Native application having nested component and you have to pass the data to child at the bottom level. Let me explain the problem with a simple code sample.

const App = () => {
  const [info, SetUserInfo] = useState({
    name: 'Rajshekhar',
    about: 'Mobile Application Developer',
  });
  return (
    <SafeAreaView style={styles.parent}>
      <Component1 userInfo={info} />
    </SafeAreaView>
  );
};
const Component1 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionTitle}>
        This is Level 1. We don't need user info
      </Text>
      <Component2 userInfo={props.userInfo}></Component2>
    </View>
  );
};
const Component2 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionSubtitle}>
        This is Level 2. We don't need user info
      </Text>
      <Component3 userInfo={props.userInfo}></Component3>
    </View>
  );
};
const Component3 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionDescription}>
        This is Level 3. I need the user info.
      </Text>
      <Text style={styles.sectionDescription}>Hi {props.userInfo.name}!!</Text>
    </View>
  );
};
  };

  return (
    <SafeAreaView style={styles.parent}>
      <Component1 userName={name} />
    </SafeAreaView>
  );
};

As you can see, We need to explicitly pass the props to even those components which do not even use it only to make the data available to the hierarchy below. We are maintaining the overhead of constantly passing the props data throughout the entire Hierarchy.

I hope you are able to understand about the problem which I am trying to explain with the above code snippet. To solve this problem we have a rescuer Context API.

Context API

Context API provides a way to pass the data to component tree without passing the data to every level. Context API reduces the coupling between the non related components. For Implementing Context ApI we need below things

We have to create a Context, using React's createContext() method.
We will use the Provider in the high-level component to provide the Context Value.
We will then Consume the Context value using render props pattern.


export const UserInfoContext = React.createContext();
const App = () => {
  const [info, SetUserInfo] = useState({
    name: 'Rajshekhar',
    about: 'Mobile Application Developer',
  });
  return (
    <SafeAreaView style={styles.parent}>
      <UserInfoContext.Provider value={info}>
        <Component1 />
      </UserInfoContext.Provider>
    </SafeAreaView>
  );
};

const Component3 = () => {
  return (
    <UserInfoContext.Consumer>
      {userInfo => {
        return (
          <View style={styles.sectionContainer}>
            <Text style={styles.sectionDescription}>
              This is Level 3. I need the user info.
            </Text>
            <Text style={styles.sectionDescription}>Hi {userInfo.name}!!</Text>
          </View>
        );
      }}
    </UserInfoContext.Consumer>
  );
};

Let me explain you the above code snippet.

I have created a UserInfoContext by calling React.createContext()
For providing the context , we have to wrap our parent component with UserInfoContext.Provider .
Then we have to provide the value that we want pass down the component tree on value prop
For consuming the provided information, we have to wrap our child (who need the data ) with UserInfoContext.Consumer component.

I found one problem with this approach. Suppose we have multiple context, then things go ugly when we consume the provided value from Provider

 return (
    <UserInfoContext.Consumer>
      {userInfo => {
        return (
          <NetworkContext.Consumer>
            {status => {
              return (
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionDescription}>
                    This is Level 3. I need the user info.
                  </Text>
                  <Text style={styles.sectionDescription}>
                    NetworkStatus : {status}
                  </Text>
                  <Text style={styles.sectionDescription}>
                    Hi {userInfo.name}!!
                  </Text>
                </View>
              );
            }}
          </NetworkContext.Consumer>
        );
      }}
    </UserInfoContext.Consumer>

This code will work. But for the shake of readability, I personally don't like it.

I hope I am able to explain the basic idea of Context API .

useContext()

As we discussed about the Context API. useContext is another way of consuming context. It accepts a context object and returns the current context value for the that context.

Declaring the useContext()

Import the useContext() package from react.

import React, { useContext} from 'react';

Creating a context

We can create a context by using React.createContext()

export const UserInfoContext = React.createContext();

Provide Context to Components

For providing the value to our component. We have to wrap our component with Provider Component.

 <UserInfoContext.Provider value={info}>
      <SafeAreaView style={styles.parent}>
        <Component1 />
      </SafeAreaView>
    </UserInfoContext.Provider>

Consuming the context

Instead of using render props, we can pass the entire context object to React.useContext() to consume context at the top of our component.

 const userInfo = useContext(UserInfoContext);
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionDescription}>
        This is Level 3. I need the user info.
      </Text>
      <Text style={styles.sectionDescription}>Hi {userInfo.name}!!</Text>
    </View>
  );

Don’t forget that the argument to useContext must be the context object itself:


useContext(MyContext.Consumer)	❌
useContext(MyContext.Provider)	❌
useContext(MyContext)	✅

Conclusion

Let's take down key points about useContext() Hook.

It removes the overhead of passing the data via props through a nested component. In a simple word, if you want the data just consume it.
We can follow three simple steps to use it.
- Create a context with the help of React.createContext() .
- Wrap the parent component with YourContext.Provider component and pass the value
- Consume it wherever it is needed with the useContext(YourContext) .

Thanks for reading this article. I have tried to explain my understanding about useContext hooks. Feel free to add suggestion. Let's connect on Twitter

useReducer() Hook: Let me dispatch it

Rajshekhar Yadav — Sun, 16 Jan 2022 11:44:25 +0000

Introduction

In previous article, I have tried to explain the useState hook. The word reducer might present a thought about Redux but don’t worry you don’t have to think about it. I will try to explain what useReducer is and how to use it.

When it comes for managing complex state logic , useState might not be a good idea. There comes the idea about useReducer .

Let’s dive in !!!

UseReducer()

useReducer() is used for storing and updating states. Basically with reducer you trigger some action to view, those event are listened by reducer who has the logic for storing or updating the state. When the state is updated your component re-render.

Anatomy of useReducer()

The useReducer(reducer, initialState) hook accepts 2 parameter. The reducer function as a first parameter and the initial state as a second parameter. The hook then returns an array of 2 items: the current state and the dispatch function.

useReducer returns an array of length two, whose first item as current stated and second item is dispatch functions.

Declaring the useReducer()

Import the useReducer() package from react

import React, {useReducer} from 'react';

Initialising the useReducer ()

We can initialising useReducer by following way.

const [state, dispatch] = useReducer(reducer, initialState)

Now we will try to decipher what is the meaning state , dispatch , reducer , initialState these terms.

Let’s create a counter app. With the help of this app I will try to explain the meaning of aforementioned terms.

Initial State

This is the default value of our component’s state when it renders first time.

const initialState = {count: 0}; // At Line 13

Dispatch Function

The dispatch function is the second items returned from the useReducer . It accepts and object that represents the type of action we want to perform. It sends an action to reducer function and reducer function perform the appropriate job ( update the state) on the basis of received action.

The actions that will be dispatched by our components should always be represented as one object with the type and payload key, where type stands as the identifier of the dispatched action and payload is the piece of information that this action will add to the state.

onPress={() => {
            dispatch({type: 'Decrement', payload: {}});
          }}

Reducer Function

The reducer function accepts two parameters, the current state & the action object . So conventionally, the action is an object with one required property and one optional property:

type is the required property. It tells the reducer what piece of logic it should be using to modify the state.
payload is the optional property. It provides additional information to the reducer on how to modify the state.

const reducer = (state, action) => {
  switch (action.type) {
    case 'Increment':
      return {...state, count: state.count + 1};
    case 'Decrement':
      return {...state, count: state.count - 1};
    case 'Reset':
      return {...state, count: 0};
    default:
      return state;
  }
};

Basically reducer accepts a current state, update the state on the basis of action object and return a new state.

Conclusion

We can conclude the useReducer in one picture.

Let’s note down all the key points regarding the useReducer

useReducer is used for managing complex state.
useReducer accepts two argument reducer function and initial state for initialisation .
```
useReducer(reducer, initialState)
```
We can initialise useReducer lazily by passing the init function as a third parameter
```
useReducer(reducer, initialState,init)
```

useReducer returns an array, whose first item represent current state and other one is dispatch function.

const [state, dispatch] = useReducer(reducer, initialState);
// state and dispatch is just a naming convention.

We can update the state by calling dispatch method. It accepts an object with two parameter. One is type and other is payload for the additional information.
The reducer function accepts the current state and action object. On the basis of action.type it update the current state and return the new updated state.

Thanks for reading this article. Feel free to add suggestion. You can follow me on Twitter

useState: Function can have state?

Rajshekhar Yadav — Sun, 09 Jan 2022 10:28:13 +0000

Introduction

There are two types of component in React-native class component & Functional component.

useState is a hook that allows a functional component to store state variable. If you are working with class component, It is equivalent to this.state/ this.setState. In this article we will try to understand the basic concept of useState.

Alright, let's get started !!

The Traditional way of managing state

In Class component, we have a property state for reading the state(hold the state) and setState property that can we used for updating the states. Whenever we update the state it triggers the render method.

export default class ButtonClick extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  render() {
    return (
      <View>
        <Text>You have clicked this {this.state.count} time(s)</Text>
        <Button
          title="Click"
          onPress={() => this.setState({count: this.state.count + 1})}></Button>
      </View>
    );
  }
}

UseState()

Functional component are just a functions that accept the properties as parameter and returns a valid JSX. Functional component does not have state or any lifecycle method. useState provides the facility of managing states in functional component.

Anatomy of useState()

The useState() hook sets up an individual state property. It returns an array containing two elements: the current state value, and a function you can call with a new value to update the state.

Declaring the useState()

Import the useState() package from react

import React, {useState} from 'react';

Initialising the state

The first argument of useState(initialState) is the initial state.

  const count = useState(0);

Reading the state

As we know useState() returns an array, whose first element is the current state.

      <Text style={{fontSize: 30}}>{count[0]}</Text>

For the shake of readability, we prefer array destructuring .

For initialisation,

  const [count, setCount]= useState(0);

For Reading the state,

      <Text style={{fontSize: 30}}>{count[0]}</Text>

Updating the State

Updating the states with a value

As we know that useState() return an array whose second item is a function which can we used for updating the state.

<Button
        title="Click Me"
        onPress={() => {
          setCount(8);
        }}
      />

Updating the states with a callback

Sometimes there is a scenario, we have to calculate the next state on the basis of previous state, we can update the state with callback.

  <Button
        title="Click Me"
        onPress={() => {
          setCount(previousCount => previousCount + 1);
        }}
      />

Using object as state variable

We can also initialise and update the object with the useState()

 const [userInfo, setUserInfo] = useState({name: 'Raj', age: 27});

For updating the the value we can try this.

  const [userInfo, setUserInfo] = useState({name: 'Raj', age: 27});
  const name = userInfo.name;
  const age = userInfo.age;
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 12}}>
        My Name is {name}. I am {age} years old
      </Text>
      <Button
        title="Update Info Me"

// It will not merge the object. It will just override the state.
        onPress={() => {
          setUserInfo(previous => {
            return {age: previous.age + 1};
          });
        }}
      />
    </View>
  );

When we will click on the Button, you will notice something interesting. Our age will be incremented by one which is correct but the name property is totally disappeared. So this is the problem with the useState(), it does not merge the object like we have seen in class component when we call this.setState. Actually It is overriding the object with current state.

If we really want to update the object, firstly we have to spread out the previous object and then update it. It will look something like that.

onPress={() => {
          setUserInfo(previous => {
// We can use spread operator
            return {...previous, age: previous.age + 1};
          });
        }}

Multiple States

When working with multiple fields or values as the state of your application, you have the option of organising the state using multiple state variables.

  const [name, setName] = useState('Raj');
  const [age, setAge] = useState(27);

Lazy initialisation of useState

Whenever we executes useState(), React re-renders the component. It is fine if the initial value is primitive value. It will not cause any performance issue.

Suppose, If we have to perform any expensive calculation (e.g. calculating fibonacci..) , it may cause performance issue. With the help of lazy initialisation we can overcome from this problem.

We can also pass a function as an argument to useState() for initialising the state.


  const [calculateJson, setCalculateJson] = useState(() => {
    return {
      name: 'Raj',
      age: 27,
    };
  });

Now it will call only first time while rendering.

Rules

Only call Hooks at top level
Only call Hooks from the React-Functions.
If your state depends on previous state try to update using callback.

 onPress={() => {
          setAge(previous => previous + 1);
        }}

Conclusion

This is the basic idea about using useStae(). Let's note down the key point.

useState() makes functional component more powerful by allowing them to the process state.
useState() returns an array whose first item is current state and second item is a function which is used for updating the state.
useState(initialParam) takes the initial value of the state variable as an argument.
We can update the state by passing a value or using a callback.
Whenever we call useState(), React will re-render the component
If we want to perform expensive calculation while initialising the state, we can do this by passing initial state as a function in useState(()=>{}). By doing so render will called only once.
useState() does not auto merge the objects . We can achieve this with the help of spread operator.

Thanks for reading this article. Feel free to add your suggestions. You can connect with me at Twitter.

Stay safe !!

React-Navigation : Navigate with Stack

Rajshekhar Yadav — Thu, 30 Dec 2021 17:32:37 +0000

React-Navigation

The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.

A Single screen mobile application is uncommon. For managing multiple screens and their behaviour, react-native provides React-Navigation library.

In this series of articles, I will try to explain about various navigation options.

Stack Navigation
Tab Navigation
Drawer Navigation

Installation

For Installation please follow this documentation. I have provided the link for RN6.0. In the end of the series we will discus about the major changes in RN6.0.

Enough talking, let's get stared.

Stack Navigation

This part will cover how to move from one screen to another, how to pass data, and different customisation options.

I hope you have followed the installation process for the react-navigation library.

First we have to wrap our app with NavigationContainer. We need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js

NavigationContainer

The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment.
It takes care of platform specific navigation and provides useful property for customisation.
Handling the back button by using BackHandler API in Android Application from react-native
Managing deep linking.

Let's have a look at the above code snippet.

createNativeStackNavigator: is a function that returns an object containing 2 properties: Screen and Navigator
Stack.Navigator: is a component that takes route configuration as its children with additional props for configuration and renders our content.
Stack.Screen: The Screen component accepts a name prop which corresponds to the name of the route we will use to navigate and a component prop which corresponds to the component it'll render. In aforementioned code the NewsFeed route corresponds to the NewsFeedScreen component.
initialRouteName: We can define the initial route by using the initialRouteName prop. In this example, we're using the Login route.

Navigate from one screen to another Screen

navigation is a prop that is passed to the component in the native stack navigator. If you're wondering what functions are used to dispatch navigation actions, you've come to the right place. Let's keep track of them.

navigate() is a function that pushes a new route to the native stack navigator if it's not already in the stack, otherwise it jumps to that screen.
goBack() is a function that we can use to navigate back to previous screen.
push() action adds a route on top of the stack and navigates forward to it.

For more details about navigation follow this document

Passing the data from one screen to another

We can pass the data to the route by putting them in an object as second parameter to the navigate function.

For getting the parameter to second screen we can use the route.params

Passing the data to previous screen

For sending the data back to previous screen. We can use navigate function and pass the data.

And getting it to the parent screen, we can use React useEffect hook. I have added an article for useEffect

Going Back

The header provided by the native stack navigator automatically contains the back functionality. There are few methods by which you can trigger back functionality manually.

navigation.goBack()
`navigation.popToTop()' function will take you back to the first screen.
navigation.navigate('Route') can also be used for navigating back to any specific screen.

Customisation of the header

We can customise header by using the options prop. Below are the properties which can be used for customising header.

headerStyle :Style object for the header.
headerTitle : Title for the header.
headerTitleStyle :Style object for the title of the header.
headerTintColor : Color of the header.
headerBackTitle :Title for the back button.
headerBackTitleVisible: Visibility of the back button.

There are many more, please refer this document

Summary

NavigationContainer is the root component of the app.
navigation.navigate('RouteName') pushes a new route to the native stack navigator if it's not already in the stack, otherwise it jumps to that screen.
navigation.push('RouteName') will add a new screen onto the stack . It does not check if the screen is already on the stack. Push will always add on top, so a route can be present multiple times.
You can read the params through route.params inside a screen
You can update the screen's params with navigation.setParams
popToTop() pops all the screens off the stack and go back to the login screen.
replace allows to replace a route in the navigation state.

iamrajshekhar / react-navigation-sample

Thank you so much for reading this article! Happy coding!

Please feel free to make suggestions or corrections. Let's connect on Twitter.

UseEffect: Is it really Effective?

Rajshekhar Yadav — Sun, 26 Dec 2021 10:09:59 +0000

What Are Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

What is useEffect

If you have been working with class component you would have performed side effects in your component like updating Ui, fetching data from api or subscribing to any changes. Since the render method is too early to perform side effects we have lifecycle method in class component.

ComponentDidMount
ComponentDidUpdate
ComponentWillUnmount

You must have been concerned about how useEffect would handle all of this. Let's get started without further ado.

How to use useEffect

UseEffect accept two arguments:

Callback: It is a function where we put write the side - effect logics.
Dependency : It is an optional array of dependency. Callback function got executed whenever these dependency changes.

  useEffect(() => {
  //Callback
  }, [dependencies]);

Let's have a look at all of the scenarios with some examples:

When the dependency is not provided: This side-effect runs after every rendering.

  useEffect(() => {
    console.log('App.js: useEffect');
  });

  return (
    <SafeAreaView style={backgroundStyle}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Button
          title="Press me"
          onPress={() => {
            setCount(count + 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If we check at the logs, we can see that the side-effect is called whenever the count changes.

 LOG  App.js: useEffect
 LOG  App.js: useEffect
 LOG  App.js: useEffect
 LOG  App.js: useEffect

When the dependency array is empty: This side-effect will call first time only.

 useEffect(() => {
    console.log('App.js: useEffect');
  }, []);

If we look into logs, side-effect got called only one time

 LOG  Click Me
 LOG  Click Me
 LOG  Click Me
 LOG  Click Me

When configured in such a way, the useEffect() executes the callback just once, after initial mounting. We can say it will work like componentDidMount()

When the dependency array have some parameter: This side-effect runs whenever the parameter changes .

 const [count, setCount] = React.useState(0);
  const [countDown, setCountDown] = React.useState(100);
  useEffect(() => {
    console.log('App.js: useEffect');
  }, [count]);
  return (
    <SafeAreaView style={{flex:1}}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Text style={styles.sectionTitle}>Time is ticking {countDown}</Text>
        <Button
          title="Increment"
          onPress={() => {
            console.log('Increment Count');
            setCount(count + 1);
          }}
        />
        <Button
          title="Decrement"
          onPress={() => {
            console.log('Decrement Count');
            setCountDown(countDown - 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If you closely look into console, You will find whenever the value of count changes, useEffect got called only then.

 LOG  App.js: useEffect
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Increment Count
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: useEffect

So you can see it will work the same way like ComponentDidUpdate work in class component

Now you must be thinking, what about side-effect cleanup? Class component has a separate method to deal with it.

Side-Effect Cleanup

Some side effects need a cleanup, like canceling any api call while un-mounting, closing connection or clearing timers.

We can achieve this by returning a cleanup function from useEffect() callback.

useEffect(() => {
  // This is your side-effect logic
  return function cleanup() {
    // Side-effect cleanup
  };
},[dependencies]);

Cleanup works in following way:

While mounting the component, useEffect() invokes the callback having the side-effect. cleanup function is not called.
On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution, then runs the current side-effect.
At the end, after unmounting the component, useEffect() invokes the cleanup function from the latest side-effect.

Let me show you some basic code to explain:

 const [count, setCount] = React.useState(0);
  useEffect(() => {
    console.log('App.js: useEffect');
    return function cleanup() {
      console.log('App.js: cleanup');
    };
  }, [count]);
  return (
    <SafeAreaView style={{flex: 1}}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Button
          title="Increment"
          onPress={() => {
            console.log('Increment Count');
            setCount(count + 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If you look into the logs, cleanup function is getting called every time before invoking the next side-effect.

 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: cleanup
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: cleanup
 LOG  App.js: useEffect

Use case of `useEffect()`

Updating Ui whenever the state changes.
*When we want to perform any action once, especially when the app mount first time. We can prefer useEffect. *

Let us consider an example , we want to fetch list of newsfeed while loading the newsfeed screen.

 const [newsFeed, setNewsFeed] = React.useState([]);
  async function fetchNewsFeed() {
    const response = await fetch('/employees');
    const newsFeedData = await response.json(response);
    setNewsFeed(newsFeedData);
  }

  useEffect(() => {    //  can not be async
    fetchNewsFeed(); // Can invoke async function
  }, []);

Conclusion

useEffect(callback, dependencies) is the hook that manages the side-effects in functional components.
- Callback argument is a function to put the side-effect logic.
- Dependencies is a list of dependencies of your side-effect: being props or state values.
useEffect(callback, dependencies) invokes the callback after initial mounting, and on later renderings, if any value inside dependencies has changed.
useEffect(callback, dependencies) can be used in following ways
- initial mounting(ComponentDidMount),
- Managing state changes (ComponentDidUpdate)
- For side-effect cleanup (ComponentWillUnmount)

React-Native/React - VsCode Extensions for effective development

Rajshekhar Yadav — Fri, 24 Dec 2021 09:21:57 +0000

When it comes to react-native development, VsCode is my go-to IDE. I'd want to share my VsCode experience over the last year. So, let's have a look at some of these React/React-Native extensions that will help you out.

React-Native-Tools Install
Using this extension, you can debug your code and quickly run react-native commands from the command palette.

VSCode React Refactor Install
This extension will help you refactor JSX code. It will help you to extract methods from long component and make your code more readable.

Eslint Install
Linting allows you to check your code for potential errors. This process helps you improve the quality of your code, and helps enforce coding standards especially when you’re working in a team.

Prettier - Code formatter Install
Prettier is a JavaScript code formatting tool. It is particularly useful to ensure that all developers working on a project are formatting code the same way.

Code Spell Checker Install
This isn't anything special; it's simply a spell checker for your code. You'll wish you had this after spending 30 minutes debugging only to discover you misspelt a word. Code Spell Checker highlights misspelt terms, saving you time and trouble in the long run.

"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,
"editor.formatOnSave": true,

GitLens Install
GitLens is a popular extension that enhances VS Code's built-in Git capabilities. It allows you to see who, why, and when a line or code block was changed, as well as hop back in time to learn more about the code's progress.

Color Highlight Install
Whenever I have a hex colour in my files, the colour will be set as background of the string.

Highlight Matching Tag Install
This extension highlights the matching tag when your cursor is placed on one.
Auto rename tag Install
If you rename one HTML/XML tag, the corresponding HTML/XML tag is also renamed.

Todo Tree Install
This plugin scans your workspace for TODO and FIXME comment tags and presents them in a tree view in the explorer window. When you click a TODO in the tree, the file will open and the cursor will be placed on the line containing the TODO.

ES7 REACT/REDUX/GRAPHQL/REACT-NATIVE SNIPPETS Install
For your VS Code, this extension provides JavaScript and React/Redux related snippets in ES7 with Babel plugin options.

Image preview Install
The Image Preview extension provides inline previews for images included HTML file types. The extension shows a pop-up window in the editor surface, and an optional image preview in the gutter, which can be toggled on or off in User Settings.

Thanks for reading
Hope this article helps you in some form or the other. Feel free to add your favourite VsCode Extension.

Follow me on Twitter

Happy Coding !!!

DEV Community: Rajshekhar Yadav

Shared Element Transition with React Native Reanimated

Introduction

What we build

Getting Started

Installation

Creating the Image Gallery Screen

Implementing the Image Details Screen

Magic aka Shared Transition

dev-rajshekhar / react-native-reanimated-example

Introduction

Library Used

Screenshots/Recordings

Learn More

Limitation

Related Links

Final Notes

useContext() Hook : Let's consume it

Introduction

The Problem

Context API

useContext()

Declaring the useContext()

Creating a context

Provide Context to Components

Consuming the context

Conclusion

useReducer() Hook: Let me dispatch it

Introduction

UseReducer()

Anatomy of useReducer()

Declaring the useReducer()

Initialising the useReducer ()

Initial State

Dispatch Function

Reducer Function

Conclusion

useState: Function can have state?

Introduction

The Traditional way of managing state

UseState()

Anatomy of useState()

Declaring the useState()

Initialising the state

Reading the state

Updating the State

Updating the states with a value

Updating the states with a callback

Using object as state variable

Multiple States

Lazy initialisation of useState

Rules

Conclusion

React-Navigation : Navigate with Stack

React-Navigation

Installation

Stack Navigation

Navigate from one screen to another Screen

Passing the data from one screen to another

Passing the data to previous screen

Going Back

Customisation of the header

Summary

Related Links

iamrajshekhar / react-navigation-sample

UseEffect: Is it really Effective?

What Are Hooks

What is useEffect

How to use useEffect

Use case of useEffect()

Conclusion

Related Link

React-Native/React - VsCode Extensions for effective development

Use case of `useEffect()`