use-update

Installation

``shell script
$ npm install use-update
`
or
`shell script
$ yarn add use-update
`

How to use

You use useUpdate almost the same way as useEffect.
When it is given the list of dependencies useUpdate is invoked when any dependence from the list change occurs.
When it is given an empty array as a dependencies or no dependencies argument(undefined) useUpdate will work like componentDidMount and is invoked immediately after updating of state or props occurs.

$3

Parent Component
`ecmascript 6
import { useState } from 'react';
import InputContent from './InputContent.js';

const App = () => {
const [name, setName] = useState('');
return (


export default App;
`

Child component
`ecmascript 6
import { useState, useEffect } from 'react'
import { useUpdate } from './useUpdate';

const InputContent = ({ contentName = 'input', contentValue }) => {
const [text, setText] = useState(No ${contentName} provided yet);

useUpdate(() => {
console.log("Will be called only if contentValue prop change");
setText(${contentName} is ${contentValue});
}, [contentValue]);

return (
<>
{/*The initial text will be "No name provided yet"
and after the input value will be changed by user the text will be updated to input value */}

export default InputContent;
`

$3

Parent Component
`ecmascript 6
import { useState } from 'react';
import Genres from './Test';

function App() {
const [genres, setGenres] = useState('');

return (


export default App;
`

Child component
`ecmascript 6
import { useState, useEffect } from 'react';
import {useUpdate} from 'use-update';

const Genre = ({genres, setGenres}) => {
const [genresList, setGenresList] = useState(null);

useEffect(() => {
setGenres(['genre 0']);

const fetchGenres = () => {
setTimeout(() => {
setGenres(['genre 1', 'genre 2']);
console.log('genres fetched');
}, 3000);
}

fetchGenres();
}, []);

useUpdate(() => {
const mappedGenres = genres.map((genre) => {
return

export default Genre;
``