Usando el hook useContext en React Native

El hook useContext puede ser usado en vez del hook useState si nuestra app tiene state que debe ser accesible desde muchos componentes que esten anidados.

Una forma de arreglar el problema de acceder al state desde componentes anidados es enviando el state de componente en componente mediante los props, lo cual se hace muy dificl de mantener en aplicaciones grandes o complejas. Para esta situacipon tenemos useContext.

Para empezar a usarlo, lo primero que tenemos que hacer es importar el hook dentro de un archivo .js que nombremos con el nombre del context que vamos a estar usando, en este caso, para una app que maneje informacion de peliculas MovieContext.js

import React, { useState, createContext } from “react”;

Después creamos el context:

export const MovieContext = createContext();

Y después inicializamos el context con valores predeterminados, en este caso un arreglo con películas:

export const MovieProvider = ({ children }) => {
const [movies, setMovies] = useState([
{ nombre: "harry poter", precio: "22" },
{ nombre: "otra cosa", precio: "332" },
{ nombre: "narnia", precio: "435" }
]);

Después exportamos el componente y damos los valores que estarán disponibles “global-mente” en este caso movies y setMovies de esta forma:

return (
<MovieContext.Provider value={[movies, setMovies]}>
{children}
</MovieContext.Provider>
);

Y eso es lo que tendrá el archivo MovieContext.js ahora podemos hacer uso del context en cualquier de nuestros componentes, sin importar que tan anidados estén en los directorios, por ejemplo un componente MovieList.js podria usar el context para mostrar la lista de movies:

import React, { useContext } from "react";
import { View, FlatList } from "react-native";
import { MovieContext } from "../context/MovieContext";
import Movie from "./Movie";

const MovieList = () => {
const[movies, setMovies] =useContext(MovieContext);

return(
<View>
<FlatList
data={movies}
renderItem={({ item }) => (
<Movie nombre={item.nombre} precio={item.precio} />
)}
keyExtractor={item =>item.nombre}
/>
</View>
);
};

export default MovieList;

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s