Why reusable button component get re-render inside formik?

Question

I have problem on my custom button, When I used my reusable button components inside the formik form I am getting rerendering. Currently I am working on react native development.

Question:

1. Does formik form support reusable components?
2. If formik form support reusable components, is there way to prevent the rerendering?

Goal:

To prevent the rerendering

Here is the sample code I made:

CustomButton:

import { View, Text } from 'react-native'
import { Button } from 'native-base'
import React from 'react'

export const CustomButton = (props) => {
  console.log(props)
  return (
    <View>
      <Button {...props}>{props?.title}</Button>
    </View>
  )
}

Inside LoginScreen:

  <Formik
enableReinitialize={true}
validationSchema={LoginValidationSchema}
initialValues={{ mobile_number: '', password: '' }}
onSubmit={values => LoginAuthHandler(values)}
>
{({
    handleChange,
    handleSubmit,
    values,
    errors,
    touched,
    form
}) => (

    <View>
    <VStack space={6} marginTop="10" padding="5%">
        <View>
        <CustomInput
            bg="#F4F4F4"
            variant="unstyled"
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={handleChange('mobile_number')}
            value={values.mobile_number}
            name="mobile_number"
            placeholder="Mobile Number">

        </CustomInput>
        {errors.mobile_number && touched.mobile_number ? (
            <Text>{errors.mobile_number}</Text>
        ) : <></>}
        </View>
        <View>
        <CustomInput
            bg="#F4F4F4"
            variant="unstyled"
            autoCapitalize="none"
            autoCorrect={false}
            name="password"
            secureTextEntry={true}
            onChangeText={handleChange('password')}
            value={values.password}
            placeholder="********">
        </CustomInput>
        {errors.password && touched.password ? (
            <Text>{errors.password}</Text>
        ) : <></>}
        </View>
    </VStack>
    <Flex padding="5%" flexDirection="row" alignSelf="flex-end">
        <Text fontWeight="300" fontSize="13">Forgot Password?</Text>
    </Flex>
    <Flex padding="5%">

        <CustomButton onPress={handleSubmit} borderRadius="100" 
        borderColor="#FFD700" size="sm" bg="#FFD700" _text={{
            color: "white",
            fontSize: "15",
            fontWeight: 'bold'
        }} title="LOG IN"></CustomButton>
    
    </Flex>

    
    </View>
)}
</Formik>

Here is the problem when I use the reusable button inside the formik

Answer 1

You can use React.memo in order to avoid unnecessary re renders. It was released in React V16.6. Try to export your component with memo

import { View, Text } from 'react-native'
import { Button } from 'native-base'
import React from 'react'

const CustomButton = (props) => {
  console.log(props)
return (
 <View>
  <Button {...props}>{props?.title}</Button>
 </View>
)}
export default React.memo(CustomButton);

Generally React.memo() is a HOC, useMemo() is a React Hook. With useMemo(), we can return memoized values and avoid re-rendering if the dependencies to a function have not changed.